近发现jquery一非常强大的插件
文件引入:
<script type="text/javascript" src="/js/jquery/jquery.scrollTo-min.js"></script>
html:
设置ul一次性存取数据9条, 页面只显示3条. 点击上下按钮滚动3条.
ul.list{height:300px;overflow:hidden} ul.list li{height:100px;width:200px;border:1px solid #000}
<ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <a id="pageup" href="javascript:void(0)" mce_href="javascript:void(0)" title="" >上3页</a> <a id="pagedown" href="javascript:void(0)" mce_href="javascript:void(0)" title="" >下3页</a>
javascript应用:
$(function(){ //init params var current = 0; var last = $('ul.list li').length - 1; //下翻按钮 $('#pagedown').click(function(){ if(current+3 < last){ current += 3; $('ul.list').scrollTo('ul.list li:eq('+current+')',500); }else { current = last; $('ul.list').scrollTo('ul.list li:eq('+last+')',500); } }); //上翻按钮 $('#pageup').click(function(){ if(current-3 > 0){ if(current == last){ current -= 5; }else { current -= 3; } $('ul.list').scrollTo('ul.list li:eq('+current+')',500); }else{ current = 0; $('ul.list').scrollTo('ul.list li:eq(0)',500); } }); })
