jQuery实现仿腾讯视频列表分页效果的方法

本文实例讲述了jQuery实现仿腾讯视频列表分页效果的方法。分享给大家供大家参考。具体如下：

这里使用jQuery仿腾讯视频列表分页效果，无刷新分页特效，点击分页按钮，无刷新进入下一页内容列表。

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题仿腾讯视频列表分页效果/title meta http-equiv=' content-type ' content=' text/html；charset=utf-8 ' style type=' text/CSS ' .main { width :800 pxzoom :1 margin 33600 auto }。项目{宽度：800像素飞越：隐藏；} ul { padding:0宽度宽度：860pxzoom:1}。清除{ zoom:1} .clear:after。在{内容： }之后；显示：块；高度：0;clear:both可见性：隐藏；} ul Li { list-style-type : none；float:left背景# F69 font-size :60 px；文本-阴影：1 px 1px 3px # 555宽度宽度：380像素高度：200 px边距336010 px 40px 10px 0；行高：200 px文本对齐：居中；color: # fff}。page _ BTN { padding-top :20 px；}.page _ BTN a { cursor : pointer padding :5 pxborder : solid 1px # CCC font-size :12 px；}.page _ box { float:right}。num { padd :0 10px }/style脚本src=' http : jquery-1。7 .1 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。就绪(功能(){ $(' ul Li : gt(3)').hide()；//初始化，前面四条数据显示，其他的数据隐藏var total_q=$('ul li ').索引()1;//总数据var current _ page=4；//每页显示的数据var current _ num=1；//当前页数var total _ page=数学。round(total _ q/current _ page)；//总页数var next=$(' .下一个');//下一页var prev=$(' .prev ')；//上一页$('.总计')。文本(total _ page)；//显示总页数$('.当前页面').文本(current _ num)；//当前的页数//下一页$('.下一个')。单击(function(){ if(current _ num==7){ return false；//如果大于总页数就禁用下一页}else{ $(' .当前页面').文本(current _ num)；//点击下一页的时候当前页数的值就加1 $.每个($('ul li ')，函数（索引、项目){ var start=current _ page *(current _ num-1)；//起始范围var end=current _ page * current _ num；//结束范围if(索引=开始索引结束){//如果索引值是在开始和目标之间的元素就显示，否则就隐$(这个)。show()；}else{ $(this).hide()；} });} });//上一页方法$('.prev ').单击(function(){ if(current _ num==1){ return false；}else{ $(' .当前页面').text(-current _ num)；$.每个($('ul li ')，函数（索引、项目){ var start=current _ page *(current _ num-1)；//起始范围var end=current _ page * current _ num；//结束范围if(索引=开始索引结束){//如果索引值是在开始和目标之间的元素就显示，否则就隐藏$(这个)。show()；}else { $(this).hide()；} });} })})))/剧本/片头dydiv class=' main ' div class=' item ' ul class=' clear ' li1/Li Li 2/Li Li/Li Li 4/Li Li 5/Li Li 6/Li Li 7/Li Li 8/Li Li 9/Li Li 10/Li Li 11/李丽丽12/Li Li 13/李丽丽14/李丽丽15/李丽丽Li 16/李丽丽Li 17/李丽丽Li 18/李丽丽19/Li li20/Li li21/Li li22上一页/aspan class=' num ' span class=' current _ page ' 1/span span style=' padd :0 3px；//span span class=' total '/span/span a class=' next '下一页/a /span /div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。