我在每页上创建了一个分为七个部分和两个colomn div的页面。当我单击右边的按钮时,我滚动到下一列,当我单击左边时,我滚动到左列。问题是,让我说我在第一页,我从第二列滚动到第三列,我离开页面,必须手动移动x滚动条。 有没有办法我可以编程按钮来强制x溢出?
由于
CSS
<style>
#contents {
width: 3500px; <!--Total size of the large container-->
height: 200px;
position: absolute; }
#container {
height: 500px;
overflow: hidden;
position: relative;
border: 1px #000 solid;
}
#container, .col {
width: 500px;<!--total size of each column.-->
}
.col {
float: left;
}
</style>
HTML
<!--Column 1-->
<div class="col">
<p>Put your content here...</p>
<button class="left">Left</button>
<button class="right">right</button>
</div><!--end div column 1-->
我为另外6列做了这个。
JAVASCRIPT
<script>
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);
});
</script>
答案 0 :(得分:1)
要为单击分配多个功能,您可以从现有功能调用功能,或专门为调用其他2个功能创建新功能。