JS特效：令人震撼的图片展示效果

  1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
  2 < html >
  3 < head >
  4 < title > 2 </ title >
  5 < meta  http-equiv ="imagetoolbar"  content ="no" >
  6 < style  type ="text/css" >
  7 html {}{
  8  overflow: hidden;
  9 }
 10 body {}{
 11  background: #222;
 12  width: 100%;
 13  height: 100%;
 14  cursor: crosshair;
 15 }
 16 .spanSlide {}{
 17  position: absolute;
 18  background: #000;
 19  font-size: 1px;
 20  overflow: hidden;
 21 }
 22 .imgSlide {}{
 23  position: absolute;
 24  left: 5%;
 25  top: 5%;
 26  width: 90%;
 27  height: 90%;
 28  overflow: hidden;
 29 }
 30 .txtSlide {}{
 31  position: absolute;
 32  top: 5%;
 33  left: 50px;
 34  width:100%;
 35  color:#FFF;
 36  font-family: arial, helvetica, verdana, sans-serif;
 37  font-weight: bold;
 38  font-size:96px;
 39  letter-spacing:12px;
 40  filter: alpha(opacity=70);
 41  -moz-opacity:0.7;
 42  opacity:0.7;
 43 }
 44 </ style >
 45 < script  type ="text/javascript" >
 46var ym=0;
 47var ny=0;
 48createElement = function(container, type, param){
 49 o=document.createElement(type);
 50 for(var i in param)o[i]=param[i];
 51 container.appendChild(o);
 52 return o;
 53}
 54mooz = {
 55 O:[],
 56 /////////
 57 mult:6,
 58 nbI:5,
 59 /////////
 60 rwh:0,
 61 imgsrc:0,
 62 W:0,
 63 H:0,
 64 Xoom:function(N){
 65  this.o = createElement(document.getElementById("screen"), "span", {
 66   'className':'spanSlide'
 67  });
 68  img = createElement(this.o, "img", {
 69   'className':"imgSlide",
 70   'src':mooz.imgsrc[N%mooz.imgsrc.length].src
 71  });
 72  spa = createElement(this.o, "span", {
 73   'className':"imgSlide"
 74  });
 75  txt = createElement(spa, "span", {
 76   'className':"txtSlide",
 77   'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title
 78  });
 79  this.N = 10000+N;
 80 },
 81 mainloop:function(){
 82  with(this){
 83   for(i=0; i<mooz.nbI; i++) {
 84    O[i].N += (ym-ny)/8000;
 85    N = O[i].N%nbI;
 86    ti = Math.pow(mult,N);
 87    with(O[i].o.style){
 88     left   = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";
 89     top    = Math.round((H-ti)/(H+ti)*(H*.5))+"px";
 90     zIndex = Math.round(10000-ti*.1);
 91     width  = Math.round(ti*rwh)+"px";
 92     height = Math.round(ti)+"px";
 93    }
 94   }
 95  }
 96  setTimeout("mooz.mainloop();", 16);
 97 },
 98 oigres:function(){
 99  with(this){
100   W = parseInt(document.getElementById("screen").style.width);
101   H = parseInt(document.getElementById("screen").style.height);
102   imgsrc = document.getElementById("images").getElementsByTagName("img");
103   rwh = imgsrc[0].width/imgsrc[0].height;
104   for(var i=0;i<nbI;i++) O[i] = new Xoom(i);
105   mainloop();
106  }
107 }
108}
109document.onmousemove = function(e){
110 if(window.event) e=window.event;
111 ym = (e.y || e.clientY);
112 if(ym/2>ny)ny=ym/2;
113}
114window.onload = function(){
115 ym = ny+50;
116 mooz.oigres();
117}
118 </ script >
119 </ head >
120 < body >
121 < div  style ="position:absolute;left:50%;top:50%" >
122   < div  style ="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff" ></ div >
123   < div  style ="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em" > Loading </ div >
124   < div  id ="screen"  style ="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden" ></ div >
125 </ div >
126 < div  id ="images"  style ="visibility:hidden" >
127   < img  title ="infinite"  src ="http://preview.zcool.com.cn/code/js/04/2/pil.jpg" >
128   < img  title ="yellow"  src ="http://preview.zcool.com.cn/code/js/04/2/cit.jpg" >
129   < img  title ="earth"  src ="http://preview.zcool.com.cn/code/js/04/2/earth.jpg" >
130   < img  title ="dream"  src ="http://preview.zcool.com.cn/code/js/04/2/draps.jpg" >
131   < img  title ="flowers"  src ="http://preview.zcool.com.cn/code/js/04/2/flo.jpg" >
132 </ div >
133 </ body >
134 </ html >  
135