原生JS分页展示效果（点击分页看效果）

更新时间：2012年11月11日 17:26:18 作者：

特别酷的分页展示效果，原生JS实现，点击分页看效果

文中图片地址已经失效，但代码功能都存在，大家注意替换下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>实例索引</title> <style type="text/css"> body{margin:0px;padding:0px;font-size:12px;font-family:Verdana, "微软雅黑";background:#2d3033;} img{border:0;} a{outline:none;} #box{width:918px;height:745px;margin:20px auto;border:5px solid #4b5258;background:#fff;padding:1px;position:relative;} #box .kuang{width:918px;height:745px;float:left; background:#eaeaea;position:relative;} #box .kuang ul{margin:0px;padding:0px;float:left;list-style-type:none;} #box .kuang li{width:130px;height:120px;display:inline;margin:28px 0 0 28px;background:#f3f3f3;float:left;padding:10px 10px 0 10px;overflow:hidden;filter:alpha(opacity=100);opacity:1;} #box .kuang li span{display:block;height:90px;} #box .kuang li h3{display:block;height:30px;line-height:30px;text-align:left;text-indent:3px;margin:0px;padding:0px;font-style:normal;} #box .kuang li h3 a{font-size:12px;font-weight:normal;color:#333;text-decoration:none;} #box .kuang li h3 a:hover{text-decoration:underline;} #box .kuang .menu{width:918px;height:76px;background:url(https://www.jb51.net/script/images/menu_bg.png) no-repeat center;display:inline;margin-top:28px;text-align:center; position:absolute;bottom:0px;left:0px;} #box .kuang .menu a{width:52px;height:52px;display:inline-block;background:url(https://www.jb51.net/script/images/menu_bg_but.png) no-repeat;margin-top:12px; color:#9c9c9c;font-size:20px;text-decoration:none;text-align:center;line-height:50px;} #box .kuang .menu a:hover{background:url(https://www.jb51.net/script/images/menu_bg_but.png) no-repeat -57px 0;} #box .kuang .menu a.hover{background:url(https://www.jb51.net/script/images/menu_bg_but.png) no-repeat -114px 0;color:#fff;} #box .l_t{width:14px;height:14px;position:absolute;background:url(https://www.jb51.net/script/images/l_t.jpg) no-repeat;top:-5px;left:-5px;z-index:10;} #box .r_t{width:14px;height:14px;position:absolute;background:url(https://www.jb51.net/script/images/r_t.jpg) no-repeat;top:-5px;right:-5px;z-index:10;} #box .l_b{width:14px;height:14px;position:absolute;background:url(https://www.jb51.net/script/images/l_b.jpg) no-repeat;bottom:-5px;left:-5px;z-index:10;} #box .r_b{width:14px;height:14px;position:absolute;background:url(https://www.jb51.net/script/images/r_b.jpg) no-repeat;bottom:-5px;right:-5px;z-index:10;} #bg{width:100%;height:100%;position:absolute;background:#000;top:0px;left:0px;filter:alpha(opacity=0);opacity:0;z-index:100;display:none;} #img_kuang{width:610px;height:20px;position:absolute;z-index:101;overflow:hidden;top:50%;left:50%;margin:0 0 0 -305px;display:none;} #img_kuang .box{width:610px;height:500px;position:absolute;background:#000;top:0;left:0;filter:alpha(opacity=50);opacity:0.5;} #img_kuang .box_1{width:588px;height:478px;position:absolute;background:#f2f2f2;top:10px;left:10px;border:1px solid #fff;} #img_kuang .box_1 h2{width:300px;height:34px;float:left;margin:0px;padding:0px;font-size:14px;line-height:34px; text-indent:15px;color:#1e2123;} #img_kuang .box_1 div em{width:100px;height:34px;line-height:34px;float:right;font-style:normal;text-align:right;color:#999999;font-size:12px;padding-right:18px;font-weight:normal;} #img_kuang .box_1 div em a{color:#999999;text-decoration:none;} #img_kuang .box_1 div em a:hover{text-decoration:underline;} #img_kuang .box_1 p{width:588px;height:412px;display:inline-block;margin:0px;padding:0px;background:url(https://www.jb51.net/script/images/img_bg.jpg) no-repeat center center;text-align:center;} #img_kuang .box_1 p img{display:inline;margin:6px 0 0 0;} #img_kuang .box_1 span{width:570px;height:32px;display:inline-block;font-size:12px;line-height:34px;padding-right:18px;text-align:right;} #img_kuang .box_1 span a{color:#006699;text-decoration:underline;} </style> <script type="text/javascript"> window.onload = function(){ var oBox = document.getElementById('box'); var oMenu = getClass(oBox, 'menu')[0]; var aMenu_a = oMenu.getElementsByTagName('a'); var aLi = oBox.getElementsByTagName('li'); var aA = oBox.getElementsByTagName('a'); var i = aList = 0; var len = aMenu_a.length; var li_len = aLi.length; var zIndex = li_len-1; var timer = null; var oSwitch = true; var oPlace = []; var aTit = [ {title:'功能筛选',url:'https://www.jb51.net/script/Filter/',img:'https://www.jb51.net/script/images/01.jpg'}, {title:'手风琴效果(海贼王)',url:'https://www.jb51.net/script/accordion/',img:'https://www.jb51.net/script/images/02.jpg'}, {title:'海贼王通缉令',url:'https://www.jb51.net/script/hzw/',img:'https://www.jb51.net/script/images/03.jpg'}, {title:'孔明社区图片切换效果',url:'https://www.jb51.net/script/kmsq/',img:'https://www.jb51.net/script/images/04.jpg'}, {title:'绝对固定位置回到顶部按钮',url:'https://www.jb51.net/js/positionFixed',img:'https://www.jb51.net/script/images/05.jpg'}, {title:'模拟表单控件',url:'https://www.jb51.net/js/ten/05.html',img:'https://www.jb51.net/script/images/06.jpg'}, {title:'拼图小游戏',url:'https://www.jb51.net/js/ten/04.html',img:'https://www.jb51.net/script/images/07.jpg'}, {title:'苹果导航栏',url:'https://www.jb51.net/js/ten/03.html',img:'https://www.jb51.net/script/images/08.jpg'}, {title:'模仿QQ登录窗口',url:'https://www.jb51.net/js/ten/02.html',img:'https://www.jb51.net/script/images/09.jpg'}, {title:'窗口拖拽（Cookie保存拖拽位置）',url:'https://www.jb51.net/js/ten/01.html',img:'https://www.jb51.net/script/images/10.jpg'}, {title:'仿土豆滚动条',url:'https://www.jb51.net/js/nine/04.html',img:'https://www.jb51.net/script/images/11.jpg'}, {title:'照片墙',url:'https://www.jb51.net/js/nine/03.html',img:'https://www.jb51.net/script/images/12.jpg'}, {title:'DIV弹出拖拽层',url:'https://www.jb51.net/js/nine/02.html',img:'https://www.jb51.net/script/images/13.jpg'}, {title:'图片预加载播放器',url:'https://www.jb51.net/js/nine/01.html',img:'https://www.jb51.net/script/images/14.jpg'}, {title:'手风琴焦点图',url:'https://www.jb51.net/js/eight/07.html',img:'https://www.jb51.net/script/images/15.jpg'}, {title:'仿土豆底部菜单效果',url:'https://www.jb51.net/js/eight/06.html',img:'https://www.jb51.net/script/images/16.jpg'}, {title:'仿腾讯微博效果',url:'https://www.jb51.net/js/eight/05.html',img:'https://www.jb51.net/script/images/17.jpg'}, {title:'淘宝幻灯片2',url:'https://www.jb51.net/js/eight/04.html',img:'https://www.jb51.net/script/images/18.jpg'}, {title:'图片淡入淡出',url:'https://www.jb51.net/js/eight/03.html',img:'https://www.jb51.net/script/images/19.jpg'}, {title:'多级右键菜单',url:'https://www.jb51.net/js/eight/02.html',img:'https://www.jb51.net/script/images/20.jpg'}, {title:'图片大小缩放',url:'https://www.jb51.net/js/eight/01.html',img:'https://www.jb51.net/script/images/21.jpg'}, {title:'缓冲运动回到顶部按钮',url:'https://www.jb51.net/js/seven/06.html',img:'https://www.jb51.net/script/images/05.jpg'}, {title:'淘宝图片幻灯片',url:'https://www.jb51.net/js/seven/04.html',img:'https://www.jb51.net/script/images/22.jpg'}, {title:'倒计时时钟',url:'https://www.jb51.net/js/three/09.html',img:'https://www.jb51.net/script/images/23.jpg'}, {title:'淡入淡出焦点图',url:'https://www.jb51.net/js/four/03.html',img:'https://www.jb51.net/script/images/24.jpg'}, {title:'焦点图',url:'https://www.jb51.net/js/four/02.html',img:'https://www.jb51.net/script/images/24.jpg'}, {title:'简易选项卡',url:'https://www.jb51.net/js/two/07.html',img:'https://www.jb51.net/script/images/25.jpg'}, {title:'评分系统',url:'https://www.jb51.net/script/01.html',img:'https://www.jb51.net/script/images/26.jpg'}, {title:'淘宝焦点图效果(面向对象)',url:'https://www.jb51.net/js/slide',img:'https://www.jb51.net/script/images/32.jpg'}, {title:'弹出层效果(面向对象)',url:'https://www.jb51.net/js/alert',img:'https://www.jb51.net/script/images/31.jpg'}, {title:'延时加载(面向对象)',url:'https://www.jb51.net/js/delayLoad',img:'https://www.jb51.net/script/images/30.jpg'}, {title:'图片连续滚动(面向对象)',url:'https://www.jb51.net/js/marqueeImg',img:'https://www.jb51.net/script/images/29.jpg'}, {title:'放大镜(面向对象)',url:'https://www.jb51.net/js/magnifier',img:'https://www.jb51.net/script/images/28.jpg'}, {title:'淡入淡出焦点图(面向对象)',url:'https://www.jb51.net/js/four/03-3.html',img:'https://www.jb51.net/script/images/24.jpg'}, {title:'焦点图(面向对象)',url:'https://www.jb51.net/js/four/02-2.html',img:'https://www.jb51.net/script/images/24.jpg'}, {title:'选项卡(面向对象)',url:'https://www.jb51.net/js/two/tab.html',img:'https://www.jb51.net/script/images/27.jpg'}, {title:'评分系统(面向对象)',url:'https://www.jb51.net/script/02.html',img:'https://www.jb51.net/script/images/26.jpg'} ]; function list(){ for(i=0;i<li_len;i++){ var oTit_img = aLi[i].getElementsByTagName('img')[0]; var oTit_a = aLi[i].getElementsByTagName('a')[1]; if(aList<aTit.length){ aLi[i].style.display= 'block'; oTit_img.src = aTit[aList].img; oTit_a.href = aTit[aList].url; oTit_a.title = aTit[aList].title; oTit_a.innerHTML = aTit[aList].title; }else{ aLi[i].style.display= 'none'; } aList++ } } list(); for(i=0;i<li_len;i++){ aLi[i].style.top = aLi[i].offsetTop+'px'; aLi[i].style.left = aLi[i].offsetLeft+'px'; aLi[i].style.zIndex = zIndex--; } for(i=0;i<li_len;i++){ aLi[i].style.margin = '0'; aLi[i].style.position = 'absolute'; aLi[i].index = i; oPlace.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop}); aLi[i].onclick = function(){ img(this) }; } for(i=0;i<aA.length;i++){ aA[i].onclick = function(){ return false; }; } for(i=0;i<len;i++){ var cli = 0; aMenu_a[i].index = i; aMenu_a[i].onclick = function(){ var _this = this; if(this.className != 'hover'){ var iNow = diNow = li_len-1; for(i=0;i<len;i++)aMenu_a[i].className = ''; aMenu_a[this.index].className = 'hover'; for(i=0;i<li_len;i++)aLi[i].onclick = null; if(cli==0){ timer = setInterval(function(){ if(oSwitch){ startMove(aLi[iNow],{opacity:0,top:600,left:parseInt(918/2-130/2)}); iNow--; if(iNow<0)oSwitch=false,cli=0,_this.index == 0 ? (aList = 0,list()) : (aList = 20,list()); }else{ setTimeout(function(){ iNow++; if(diNow>=0)startMove(aLi[diNow],{opacity:100,top:oPlace[diNow].top,left:oPlace[diNow].left}); diNow--; if(iNow==li_len-1){ oSwitch=true; clearInterval(timer); for(i=0;i<li_len;i++){ aLi[i].onclick = function(){ img(this) }; } } },1100); } },100); } cli++; } }; } }; //img function img(obj){ var oBg = document.getElementById('bg'); var oImg_kuang = document.getElementById('img_kuang'); var oImg_img = oImg_kuang.getElementsByTagName('img')[0]; var oImg_H2 = oImg_kuang.getElementsByTagName('h2')[0]; var oImg_span = oImg_kuang.getElementsByTagName('span')[0].getElementsByTagName('a')[0]; var oImg = obj.getElementsByTagName('img')[0].src; var oH3 = obj.getElementsByTagName('h3')[0].getElementsByTagName('a')[0]; oImg_img.src = oImg.replace('https://www.jb51.net/script/images/','https://www.jb51.net/script/images/big/'); oImg_H2.innerHTML = oH3.innerHTML; oImg_span.href = oH3.href; oBg.style.display = 'block'; oBg.style.height = document.documentElement.scrollHeight+'px'; setTimeout(function(){ startMove(oBg,{opacity:70},function(){ oImg_kuang.style.display = 'block'; startMove(oImg_kuang,{height:500,marginTop:document.documentElement.scrollTop-250},function(){ var oClose = document.getElementById('close'); oClose.onclick = function(){ startMove(oImg_kuang,{height:0,marginTop:0},function(){ oImg_kuang.style.display = 'none'; startMove(oBg,{opacity:0},function(){ oBg.style.display = 'none'; }); }); }; }); }); },1000); } //运动框架 function startMove(obj, json, fnEnd){ if(obj.timer)clearInterval(obj.timer); obj.timer = setInterval(function (){ doMove(obj, json, fnEnd); }, 30); } function getStyle(obj, attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; } function doMove(obj, json, fnEnd){ var iCur = 0; var attr = ''; var bStop = true; for(attr in json){ attr == 'opacity' ? iCur = parseInt(parseFloat(getStyle(obj, 'opacity'))*100) : iCur = parseInt(getStyle(obj, attr)); if(isNaN(iCur))iCur = 0; if(navigator.userAgent.indexOf("Firefox") > 0){ var iSpeed = (json[attr]-iCur) / 6; }else{ var iSpeed = (json[attr]-iCur) / 4; } iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(parseInt(json[attr])!=iCur)bStop = false; if(attr=='opacity'){ obj.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")"; obj.style.opacity = (iCur + iSpeed) / 100; }else{ attr == 'zIndex' ? obj.style[attr] = iCur + iSpeed : obj.style[attr] = iCur + iSpeed +'px'; } } if(bStop){ clearInterval(obj.timer); obj.timer = null; if(fnEnd)fnEnd(); } } //class函数 function getClass(oParent, sClass){ var aElem = oParent.getElementsByTagName('*'); var aClass = []; var i = 0; for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]); return aClass; } </script> </head> <body> <div id="bg"></div> <div id="img_kuang"> <div class="box"></div> <div class="box_1"> <div><h2>222</h2><em><a href="javascript:;" id="close">× 关闭</a></em></div> <p><img src="" /></p> <span><a href="javascript:;" target="_blank">>>点击浏览</a></span> </div> </div> <div id="box"> <div> <em class="l_t"></em> <em class="r_t"></em> <em class="l_b"></em> <em class="r_b"></em> </div> <div class="kuang"> <ul> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> <li> <span><a href="javascript:;"><img src="" width="100%" height="100%" /></a></span> <h3><a href="" title=""></a></h3> </li> </ul> <div class="menu"> <a href="javascript:;" class="hover">1</a> <a href="javascript:;">2</a> </div> </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS分页展示

TypeScript Type Innference(类型判断)
TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。接下来通过本文给大家介绍TypeScript Type Innference(类型判断)的相关知识，需要的朋友参考下
2016-03-03
JS弹出对话框实现方法(三种方式)
这篇文章主要介绍了JS弹出对话框实现方法,结合实例形式分析了三种方式,包括alert、confirm及prompt,非常简单实用,需要的朋友可以参考下
2015-12-12
Bootstrap被封装的弹层
这篇文章主要介绍了Bootstrap被封装的弹层的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
js实现各种复制到剪贴板的方法(分享)
下面小编就为大家带来一篇js实现各种复制到剪贴板的方法(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
Javascript非构造函数的继承
本文给大家介绍的是不使用构造函数实现"继承"，非常的简单，小伙伴们仔细了解下就可以非常熟悉了。
2015-04-04
用JS剩余字数计算的代码
函数中首先给maxChars变量指定了值(输入区内最多可用的字符数，注意，该变量是个可用于计算的数值)
2008-07-07
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
这篇文章主要介绍了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-01-01
SyntaxHighlighter代码加色使用方法
原名：SyntaxHighlighter，是一款用于web页面的代码着色工具，可以用来着色多种语言，可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI，当时还属于自由软件，最近打开官方网站发现已被goolge收编。
2008-09-09
javascript下过滤数组重复值的代码
javascript下过滤数组重复值的代码...
2007-09-09
Javascript oop设计模式面向对象编程简单实例介绍
这篇文章主要介绍了Javascript oop设计模式面向对象编程简单实例介绍的相关资料,这里附有实例代码帮助大家学习理解，需要的朋友可以参考下
2016-12-12