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

要获得与问题中提到的模型小提琴相同的效果，#containers的宽度必须等于您的列。 #contents的宽度必须等于#containers的宽度乘以列数（本例中为3）。 .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和{{1 }}。我还添加了第三列，因为您的问题是专门询问如何将此常规技术应用于两列以上。

.left

的JavaScript

要使<div id="container"> <div id="contents">  <div class="col"> <p>Put your content here...</p> <button class="left">Left</button> <button class="right">right</button> </div>  <div class="col"> <p>Put another content here...</p> <button class="left">Left</button> <button class="right">right</button> </div>  <div class="col"> <p>Put another content here...</p> <button class="left">Left</button> <button class="right">right</button> </div> </div> </div> jQuery方法按您希望的方式工作，您必须使用相对属性值（有关详细信息，请参阅.animate() API page）。为了防止.animate()从列中滑落，我创建了一个简单的函数#container，并根据getOffset()的边界进行了检查。

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

contwidth

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

多次滚动容器div

1 个答案:

CSS

HTML

的JavaScript