特效介绍

JS弹性图片相册分页
使用方法
1、在head引入下面的css文件:
1 | < link href = "css/back.css" type = "text/css" rel = "stylesheet" /> |
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 > |
001 | <script type= "text/javascript" src= "js/move.js" ></script> |
002 | <script type= "text/javascript" > |
003 | window.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 | } |
095 | function 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> |