原生JS分页展示效果(点击分页看效果)
文中图片地址已经失效,但代码功能都存在,大家注意替换下
实例索引
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(http://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(http://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(http://www.jb51.net/script/images/menu_bg_but.png) no-repeat -57px 0;}
#box .kuang .menu a.hover{background:url(http://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(http://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(http://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(http://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(http://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(http://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;}
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:'http://www.jb51.net/script/Filter/',img:'http://www.jb51.net/script/images/01.jpg'},
{title:'手风琴效果(海贼王)',url:'http://www.jb51.net/script/accordion/',img:'http://www.jb51.net/script/images/02.jpg'},
{title:'海贼王通缉令',url:'http://www.jb51.net/script/hzw/',img:'http://www.jb51.net/script/images/03.jpg'},
{title:'孔明社区图片切换效果',url:'http://www.jb51.net/script/kmsq/',img:'http://www.jb51.net/script/images/04.jpg'},
{title:'绝对固定位置回到顶部按钮',url:'http://www.jb51.net/js/positionFixed',img:'http://www.jb51.net/script/images/05.jpg'},
{title:'模拟表单控件',url:'http://www.jb51.net/js/ten/05.html',img:'http://www.jb51.net/script/images/06.jpg'},
{title:'拼图小游戏',url:'http://www.jb51.net/js/ten/04.html',img:'http://www.jb51.net/script/images/07.jpg'},
{title:'苹果导航栏',url:'http://www.jb51.net/js/ten/03.html',img:'http://www.jb51.net/script/images/08.jpg'},
{title:'模仿QQ登录窗口',url:'http://www.jb51.net/js/ten/02.html',img:'http://www.jb51.net/script/images/09.jpg'},
{title:'窗口拖拽(Cookie保存拖拽位置)',url:'http://www.jb51.net/js/ten/01.html',img:'http://www.jb51.net/script/images/10.jpg'},
{title:'仿土豆滚动条',url:'http://www.jb51.net/js/nine/04.html',img:'http://www.jb51.net/script/images/11.jpg'},
{title:'照片墙',url:'http://www.jb51.net/js/nine/03.html',img:'http://www.jb51.net/script/images/12.jpg'},
{title:'DIV弹出拖拽层',url:'http://www.jb51.net/js/nine/02.html',img:'http://www.jb51.net/script/images/13.jpg'},
{title:'图片预加载播放器',url:'http://www.jb51.net/js/nine/01.html',img:'http://www.jb51.net/script/images/14.jpg'},
{title:'手风琴焦点图',url:'http://www.jb51.net/js/eight/07.html',img:'http://www.jb51.net/script/images/15.jpg'},
{title:'仿土豆底部菜单效果',url:'http://www.jb51.net/js/eight/06.html',img:'http://www.jb51.net/script/images/16.jpg'},
{title:'仿腾讯微博效果',url:'http://www.jb51.net/js/eight/05.html',img:'http://www.jb51.net/script/images/17.jpg'},
{title:'淘宝幻灯片2',url:'http://www.jb51.net/js/eight/04.html',img:'http://www.jb51.net/script/images/18.jpg'},
{title:'图片淡入淡出',url:'http://www.jb51.net/js/eight/03.html',img:'http://www.jb51.net/script/images/19.jpg'},
{title:'多级右键菜单',url:'http://www.jb51.net/js/eight/02.html',img:'http://www.jb51.net/script/images/20.jpg'},
{title:'图片大小缩放',url:'http://www.jb51.net/js/eight/01.html',img:'http://www.jb51.net/script/images/21.jpg'},
{title:'缓冲运动回到顶部按钮',url:'http://www.jb51.net/js/seven/06.html',img:'http://www.jb51.net/script/images/05.jpg'},
{title:'淘宝图片幻灯片',url:'http://www.jb51.net/js/seven/04.html',img:'http://www.jb51.net/script/images/22.jpg'},
{title:'倒计时时钟',url:'http://www.jb51.net/js/three/09.html',img:'http://www.jb51.net/script/images/23.jpg'},
{title:'淡入淡出焦点图',url:'http://www.jb51.net/js/four/03.html',img:'http://www.jb51.net/script/images/24.jpg'},
{title:'焦点图',url:'http://www.jb51.net/js/four/02.html',img:'http://www.jb51.net/script/images/24.jpg'},
{title:'简易选项卡',url:'http://www.jb51.net/js/two/07.html',img:'http://www.jb51.net/script/images/25.jpg'},
{title:'评分系统',url:'http://www.jb51.net/script/01.html',img:'http://www.jb51.net/script/images/26.jpg'},
{title:'淘宝焦点图效果(面向对象)',url:'http://www.jb51.net/js/slide',img:'http://www.jb51.net/script/images/32.jpg'},
{title:'弹出层效果(面向对象)',url:'http://www.jb51.net/js/alert',img:'http://www.jb51.net/script/images/31.jpg'},
{title:'延时加载(面向对象)',url:'http://www.jb51.net/js/delayLoad',img:'http://www.jb51.net/script/images/30.jpg'},
{title:'图片连续滚动(面向对象)',url:'http://www.jb51.net/js/marqueeImg',img:'http://www.jb51.net/script/images/29.jpg'},
{title:'放大镜(面向对象)',url:'http://www.jb51.net/js/magnifier',img:'http://www.jb51.net/script/images/28.jpg'},
{title:'淡入淡出焦点图(面向对象)',url:'http://www.jb51.net/js/four/03-3.html',img:'http://www.jb51.net/script/images/24.jpg'},
{title:'焦点图(面向对象)',url:'http://www.jb51.net/js/four/02-2.html',img:'http://www.jb51.net/script/images/24.jpg'},
{title:'选项卡(面向对象)',url:'http://www.jb51.net/js/two/tab.html',img:'http://www.jb51.net/script/images/27.jpg'},
{title:'评分系统(面向对象)',url:'http://www.jb51.net/script/02.html',img:'http://www.jb51.net/script/images/26.jpg'}
];
function list(){
for(i=0;i
diNow--;
if(iNow==li_len-1){
oSwitch=true;
clearInterval(timer);
for(i=0;i
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
222
× 关闭
>>点击浏览
1
2
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]