0

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

1 回答 1

0

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

CSS

要获得与问题中提到的模型小提琴相同的效果,#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的只能使用一次,因此我将元素上的and更改为#rightand 。我还添加了第三列,因为您的问题是专门询问如何将这种通用技术应用于两列以上。#leftbutton.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 页面)。为了防止#container从列滑落,我制作了一个简单的函数 ,getOffset()并对照 的边界检查了它#contents

您还应该将尽可能少的值硬编码到 JS 中,而是从 DOM 中读取它们,就像我在这里使用colwidthcontwidth.

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);
});

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

于 2013-02-18T19:58:30.693 回答