Jquery 在单独的div上水平匹配滚动背景的位置对齐_Jquery_Html_Css_Jquery Ui_Display

Jquery 在单独的div上水平匹配滚动背景的位置对齐

jquery html css jquery-ui

Jquery 在单独的div上水平匹配滚动背景的位置对齐,jquery,html,css,jquery-ui,display,Jquery,Html,Css,Jquery Ui,Display,（Tl；斜体字dr，如下）到目前为止，我的页面由五个独立的和多类的div（读作：“panels”）（.panel{}）组成，我已经使用CSS使用display:table cell格式化了这些div。它们包含在周围的包装器（.wrapper{}）中，该包装器同样使用display:table进行格式化出于这个问题的目的，如果我们将它们从左到右标记为当前加载页面中显示的面板1、2、3、4和5，那么面板3（.main{}）设置为宽度：850px 面板2和4（输送机{}）设置为宽度：20px 及

（Tl；斜体字dr，如下）

到目前为止，我的页面由五个独立的和多类的div（读作：“panels”）（

.panel{}

）组成，我已经使用CSS使用

display:table cell

格式化了这些div。它们包含在周围的包装器（

.wrapper{}

）中，该包装器同样使用

display:table

进行格式化

出于这个问题的目的，如果我们将它们从左到右标记为当前加载页面中显示的面板1、2、3、4和5，那么

面板3（

.main{}

）设置为

宽度：850px

面板2和4（

输送机{}

）设置为

宽度：20px

及

面板1和5（

#leftBG{}

和

#righbg{}

分别设置为

宽度：100%

）

结果是五个div，类“panel”在页面上均匀分布，设置为

高度：100%

，宽度如上所述

我有一个按钮，单击时，使用jQuery UI

.addClass（）

效果将第二和第四个面板加宽180像素（在本例中，从20px[

.converter{}

]到200px[

.showConverter

]）

问题：我有一个小背景，我希望能够滚动，重复以跨越整个页面，在div1、3和5中可见，并且看起来像标准的

正文{background image:background.jpg；repeat:repeat；background attachment:scroll；}

重复背景，但是它应该随着面板2和4的扩展而移动，这样它将在面板1内被面板2推向左侧180像素，在面板5内被面板4推向右侧180像素

我现在已经设置好了，这样两个面板中的背景（1和5）都会按照正确的像素数沿着它们应该的方向移动，但是分割背景的起始位置与标准重复背景的外观不匹配，如果我们想象divs 1，3，和5是重复的

body{}

背景图像前面的透明div，该背景图像使用相同的

background.jpg

，由

#leftBG{}

和

#rightBG{}

调用

如果有人能告诉我如何设置div 1、3和5的起始背景位置，使它们组合起来与标准

主体

背景相匹配，但面板2和4仍会加宽并移动面板1和5的背景，如单击按钮时所述，我将不胜感激

jQuery（用户界面）：

CSS

HTML


你好

你的代码在哪里？@madalinivascu UpdatedIt真的不清楚你想在这里完成什么。单击按钮时会发生什么情况？什么不起作用？在这里测试：@Twisty您知道标准

body{}

元素中重复背景的外观，对吗？按钮应该使页面的行为看起来像是按钮将这样的背景分成三部分：中间部分（面板3）应该保持原样，最左边的部分（面板1）应该移到左边x个像素，最右边的部分（面板5）应向右移动x个像素。@StephenHanson您希望边界移动，背景保持不变，还是让它看起来打开得更多，背景移动的地方？

$(document).ready( function() {
    $( "button" ).click( function() {
        $( ".conveyor" ).addClass( "showConveyor" , 400 ) ;
    } ) ;
} ) ;

html {
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;
}

body {
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;
}

div {
    margin:0px;
    padding:0px;
    position: relative;
}

div.wrapper {
    display:table;
    text-align:center;
    height:100%;
    width:100%;
}

div.panel {
    display:table-cell;
    height: 100%;
}

div.push { // had something here; lost it
}

#leftBG {
    background: url("background.jpg");
    background-size: 400px;
    background-attachment: local;
    background-position: right top;
}

#rightBG {
    background: url("background.jpg");
    background-size: 400px;
    background-attachment: local;
    background-position: left top;
}

div.spacer {
    width: 20px;
    background: gray;
}

div.conveyor {
    width: 20px;
    background: red;
}

div.showConveyor {
    width: 200px;
}

div.main {
    width: 850px;
}

<!DOCTYPE HTML>

<html>
    <body>
        <div class="wrapper">
        <div class="panel push" id="leftBG"></div>
        <div class="panel conveyor"></div>
        <div class="panel main">
            <button>Howdy</button>
        </div>
        <div class="panel conveyor"></div>
        <div class="panel push" id="rightBG"></div>
        </div>
    </body>
</html>