jquery 实现上下滚动效果示例代码
作者：
上下滚动的效果，不用说，大家都有看到过，本文为大家介绍下使用jquery实现上下滚动效果，感兴趣的朋友可以参考下，希望对大家有所帮助
复制代码 代码如下:
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
var page = 1;
var i = 1;
var conheight = $('.con li').height();
var lilen = $('li').length;
var len = Math.ceil( lilen / i );
alert(conheight+ " " + len);
//alert("page:"+page+" i:"+i+" conheight:"+conheight+" lilen:"+lilen+" len:"+len)
$('.next').click(function() {
if( page == len){
alert("已经到底不能再在操作！");
return false;
}
$('.con_list').animate({top:'-=' + conheight},'slow');
page++;
//if( page == len ) {
// $('.con_list').animate({top:0},'slow');
// page = 1;
// }else{
// $('.con_list').animate({top:'-=' + conheight},'slow');
// page++;
//}
});
$('.prev').click(function() {
if(page == 1){
alert("已经到头不能再进行操作！");
return false;
}
$('.con_list').animate({top:'+=' + conheight},'slow');
page--;
//if( page == 1 ) {
// $('.con_list').animate({top:'-=' + conheight*(len - 1)},'slow');
// page = len;
//}else{
// $('.con_list').animate({top:'+=' + conheight},'slow');
// page--;
//}
});
})
</script>
<style type="text/css">
* {
margin:0;padding:0
}
.prev,.next{
width:100px;height:20px;background:#333;cursor:pointer
}
.con{
width:100px;height:300px;overflow:hidden;position:relative
}
.con_list{
position:relative
}
.con li{
height:100px
}
.one{
background:#F90
}
.two {
background:#69C
}
.three{
background:#633
}
</style>
<body>
<div class="prev"></div>
<div class="con">
<div class="con_list">
<ul>
<li class="one">11111111111111111111</li>
<li class="two">22222222222222222222</li>
<li class="three">333333333333333333333</li>
<li class="three">444444444444444444444</li>
<li class="one">5555555555555555555555</li>
<li class="two">6666666666666666666666666</li>
<li class="one">7777777777777777777777777</li>
<li class="two">88888888888888888888</li>
<li class="one">99999999999999999999</li>
<li class="one">10103000000000</li>
</ul>
</div>
</div>
<div class="next"></div>
</body>