javascript - 多次滚动容器 div

Question

我有一个页面，我想滚动浏览容器内的数据，如下所示:http://jsfiddle.net/pXy2C/ .

我创建了彼此相邻的文本列，我可以使用多个 div 滚动它们。现在...在每个 div 中，我想创建一个按钮，将容器滚动到下一个 div 或上一个 div。上面 jsfiddle 示例的问题，它只滚动第一个和最后一个 200px。有什么方法可以让我采取抵消措施来完成我需要做的事情吗？

我的尝试在这里http://jsfiddle.net/3xgSX/ ，但我也会将其粘贴在下方。

感谢您的帮助。

CSS:

#container{
width:1000px;
height:500px;
overflow:hidden;
Position:relative;border:1px #000 solid;
}

#contents{
width:1000px;
height:200px;
position:absolute;
top:0;
left:0;
}

HTML:

<!--Column 1--> 
<div style='float:left; width:150px'>
Put your content here...
<button id="left">Left</button>
<button id="right">right</button>
</div><!--end div colomn 1-->


 <!--Column 2-->    
 <div style='float:left; width:150px; margin-left:300px'>
Put another content here...
<br>
<button id="left">Left</button>
<button id="right">right</button>

</div><!--End div column2-->



 </div><!--End div "contents"-->

Javascript:

<script type="text/javascript">
   $(document).ready(function(){
$("#right").click(function(){
    $("#contents").animate({left:'-200px'},500);
    $("#container").animate({'margin-left':'200px'},500);
});
$("#left").click(function(){
    $("#contents").animate({left:'0px'},500);
     $("#container").animate({'margin-left':'0px'},500);
});
});
</script>

Answer 1

好的，请耐心等待，这里有许多问题需要解决，所以我将详细介绍一下。

CSS

要获得与问题中提到的模型 fiddle 相同的效果，#containers宽度必须等于您的列。 #contents那么宽度必须等于 #containers 的宽度乘以列数(本例中为三列)。 .col将替换您原始代码中的内联 CSS。

#contents {
    width: 600px;
    height: 200px;
    position: absolute;
}
#container {
    height: 500px;
    overflow: hidden;
    position: relative;
    border: 1px #000 solid;
}
#container, .col {
    width: 200px;
}
.col {
    float: left;
}

HTML

任何给定id只能使用一次，所以我更改了 #right和 #left在 button 上元素 .right和 .left .我还添加了第三列，因为您的问题专门询问如何将这种通用技术应用于两列以上。

<div id="container">
    <div id="contents">

<!--Column 1--> 
<div class="col">
    <p>Put your content here...</p>
    <button class="left">Left</button>
    <button class="right">right</button>
</div><!--end div colomn 1-->


<!--Column 2--> 
<div class="col">
    <p>Put another content here...</p>
    <button class="left">Left</button>
    <button class="right">right</button>
</div><!--End div column2-->


<!--Column 3--> 
<div class="col">
    <p>Put another content here...</p>
    <button class="left">Left</button>
    <button class="right">right</button>
</div><!--End div column3-->



    </div><!--End div "contents"-->
</div><!--End div container-->

JavaScript

获取.animate() jQuery 方法以您想要的方式工作，您必须使用相对属性值(有关更多信息，请参阅 .animate() API page)。为了保持#container从柱子上滑下来，我做了一个简单的函数，getOffset() , 并根据 #contents 的边界进行检查.

您还应该将尽可能少的值硬编码到 JS 中，而不是从 DOM 中读取它们，就像我在这里使用 colwidth 一样。和 contwidth .

var colwidth = $('#container').width(),
    contwidth = $('#contents').width(),
    getOffset = function() {
        return parseInt($('#container').css('margin-left'));
    };

$(".left").click(function(){
    if (getOffset() === 0) return false;

    $("#contents").animate({left: '+=' + colwidth},500);
    $("#container").animate({'margin-left': '-=' + colwidth},500);
});
$(".right").click(function(){
    if (getOffset() === contwidth - colwidth) return false;

    $("#contents").animate({left: '-=' + colwidth},500);
    $("#container").animate({'margin-left': '+=' + colwidth},500);
});

如果您继续努力，可能会有更优雅的解决方案，但这应该会让您朝着正确的方向前进。