我有一个页面,我想滚动容器内的数据,如下所示: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>