首页 > 特效插件 > 表格弹出层 >  js弹性的图片相册分页列表正文

js弹性的图片相册分页列表

特效介绍
JS弹性图片相册分页
JS弹性图片相册分页

JS弹性图片相册分页切换展示,点击分页后,图片列表先弹性的消失,下一组再弹性的展现出来,效果非常炫酷。支持的浏览器: IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

使用方法
1、在head引入下面的css文件:
1<link href="css/back.css" type="text/css" rel="stylesheet" />
2、在body需要使用该特效的地方加入下面的html代码:
01<div id="box">
02    <div class="list"><img src='img/imsc/1.jpg' title="我爱模板网" /></div>
03    <div class="list"><img src='img/imsc/2.jpg' title="我爱模板网" /></div>
04    <div class="list"><img src='img/imsc/3.jpg' title="模板网" /></div>
05    <div class="list"><img src='img/imsc/4.jpg' title="网页模板" /></div>
06    <div class="list"><img src='img/imsc/5.jpg' title="模板" /></div>
07    <div class="list"><img src='img/imsc/6.jpg' title="模板网" /></div>
08    <div class="list"><img src='img/imsc/7.jpg' title="模板网" /></div>
09    <div class="list"><img src='img/imsc/8.jpg' title="模板网" /></div>
10    <div class="list"><img src='img/imsc/9.jpg' title="模板网" /></div>
11    <div class="list"><img src='img/imsc/10.jpg' title="网页特效" /></div>
12    <div class="list"><img src='img/imsc/11.jpg' title="我爱模板网" /></div>
13    <div class="list"><img src='img/imsc/12.jpg' title="我爱模板网" /></div>
14</div>
15    
16<div id="page">
17    <a href="javascript:void(0);" class="active">1</a>
18    <a href="javascript:void(0);">2</a>
19    <a href="javascript:void(0);">3</a>
20</div>
3、在底部加入下面的js代码
001<script type="text/javascript" src="js/move.js"></script>   
002<script type="text/javascript">
003window.onload = function(){
004    var Box = document.getElementById('box');
005    var list_l = myclass('list',Box);
006    var aLi = document.getElementById('page').getElementsByTagName('a');
007    var alist = [];
008    var olist = true;
009    for(var i=0; i<list_l.length; i++){
010        var Oleft = list_l[i].offsetLeft;
011        var Otop = list_l[i].offsetTop;
012        alist[i] = {left:Oleft,top:Otop}
013    }
014    for(var i=0; i<list_l.length; i++){
015        list_l[i].style.left = alist[i].left+"px";
016        list_l[i].style.top = alist[i].top+"px";
017        list_l[i].style.position = "absolute";
018        list_l[i].style.margin =0+"px";
019        list_l[i].style.opacity =1;
020    }
021    for(var i=0; i<aLi.length; i++){
022        aLi[i].index = i;
023        aLi[i].onclick = function(){
024            if(olist===false){
025                return;
026            }
027            olist = false;
028            list_l = myclass('list',Box);
029            for(var n=0; n<aLi.length; n++){
030                aLi[n].className="";
031            }
032            this.className="active";
033            var Dates = sst(this.index);
034            var n=list_l.length-1;
035            var cont = 0;
036            var t=setInterval(function(){
037                buffer(list_l[n],{
038                    top:150,
039                    left:150,
040                    width:50,
041                    height:30,
042                    opacity:0
043                },2,function(){
044                    Box.removeChild(this);
045                    cont++;
046                    if(cont==list_l.length){
047                        juest(Dates)
048                    }
049                    if(n<0){
050                        clearInterval(t);
051                    }
052                })
053                n--;
054            },100)
055            function juest(Dates){
056                var i=0;
057                var t=setInterval(function(){
058                    if(i==Dates.length-1){
059                        clearInterval(t);
060                        olist=true;
061                    }
062                    var Odiv = document.createElement('div');
063                    var Oimg = document.createElement('img');
064                    Odiv.className="list";
065                    Oimg.src = Dates[i];
066                    Box.appendChild(Odiv);
067                    Odiv.appendChild(Oimg);
068                    Odiv.style.top= 150 +'px';
069                    Odiv.style.left=150+'px';
070                    Odiv.style.width = 50+'px';
071                    Odiv.style.height=30+'px';
072                    Odiv.style.position ='absolute';
073                    Odiv.style.margin=0+'px';
074                    fiexible(Odiv,{
075                        left:alist[i].left,
076                        top:alist[i].top,
077                        width:100,
078                        height:60
079                    },3)
080                    i++;
081                    },100)
082            }
083            function sst(nums){
084                var Mus = nums*12;
085                var end = Mus+12;
086                var rest = [];
087                for(var i=Mus+1; i<=end; i++){
088                    rest.push('img/imsc/'+i+'.jpg')
089                }
090                return rest;
091            }
092        }
093    }
094}
095function myclass(names,docu){
096    var obj = docu.getElementsByTagName('*');
097    var arr = [];
098    for(var i=0; i<obj.length; i++){
099        if(obj[i].className == names){
100            arr.push(obj[i]);
101            }
102        }
103        return arr;
104    }
105</script>