Posted in Javascript onAugust 09, 2013
<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>
jquery 实现上下滚动效果示例代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@