<div class="codetitle"> <span><a style="CURSOR: pointer" data="67132" class="copybut" id="copybut67132" onclick="doCopy('code67132')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code67132"> <br><script type="text/javascript" src="script/jquery%20-1.7.2.min.js"></script> <br><script type="text/javascript"> <BR>$(function() { <BR>var page = 1; <BR>var i = 1; <BR>var conheight = $('.con li').height(); <BR>var lilen = $('li').length; <BR>var len = Math.ceil( lilen / i ) ; <BR>alert(conheight " " len); <BR>//alert("page:" page " i:" i " conheight:" conheight " lilen:" lilen " len:" len) <BR>$( '.next').click(function() { <BR>if( page == len){ <BR>alert("已經到底不能再在操作!"); <BR>return false; <BR>} <BR>$('.con_list').animate({top:'-=' conheight},'slow'); <BR>page ; <BR>//if( page == len ) { <BR>// $('.con_list').animate({top:0},'slow'); <BR>// page = 1; <BR>// }else{ <BR>// $('.con_list') .animate({top:'-=' conheight},'slow'); <BR>// page ; <BR>//} <BR>}); <BR>$('.prev').click( function() { <BR>if(page == 1){ <BR>alert("已經到頭不能再操作!"); <BR>return false; <BR>} <BR>$('.con_list' ).animate({top:' =' conheight},'slow'); <BR>page--; <BR>//if( page == 1 ) { <BR>// $('.con_list') .animate({top:'-=' conheight*(len - 1)},'slow'); <BR>// page = len; <BR>//}else{ <BR>// $('. con_list').animate({top:' =' conheight},'slow'); <BR>// page--; <BR>//} <BR>}); <BR>}) <BR>< /script> <BR><style type="text/css"> <BR>* { <BR>margin:0;padding:0 <BR>} <BR>.prev,.next{ <BR>width:100px ;height:20px;background:#333;cursor:pointer <BR>} <BR>.con{ <BR>width:100px;height:300px;overflow:hidden;position:relative <BR>} <BR>} <🎜 { <BR>position:relative <BR>} <BR>.con li{ <BR>height:100px <BR>} <BR>.one{ <BR>background:#F90 <BR>} <n🎜>} <n🎜 { <BR>background:#69C <BR>} <BR>.three{ <BR>background:#633 <BR>} <BR> <BR><body> <BR><div class=" prev"></script> </div> <br><div class="con"> <br><div class="con_list"> <br><ul> <br><li class="one">11111111111111111111</li> <br><li class="two">22222222222222222222</li> <br><li class="three">3333333333333333333333</li> <br><li333333333333333> <li class="one">5555555555555555555555</li> <br><li class="two">6666666666666666666666666 🎜> </li> <li class="two">88888888888888888888</li> <br><li class="one">99999999999999999999</li> <br><li class="one">10103000 ul> <br> </li></li333333333333333> </ul> </div> <br> </div> <br><div class="next"></div> <br>