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> 相关推荐
89510194 2020-06-27
Ladyseven 2020-10-22
luofuIT成长记录 2020-09-22
Mynamezhuang 2020-09-18
李鴻耀 2020-08-17
yaodilu 2020-08-03
zhoujiyu 2020-06-28
CaiKanXP 2020-06-13
MaureenChen 2020-06-12
Phoebe的学习天地 2020-06-07
淡风wisdon大大 2020-06-06
buttonChan 2020-06-06
xtuhcy 2020-05-20
AlisaClass 2020-05-18
赵家小少爷 2020-05-16
nicepainkiller 2020-05-05