您现在的位置: 365建站网 > 365学习 > JS特效:令人震撼的图片展示效果

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

文章来源:365jz.com     点击数:198    更新时间:2009-09-20 08:52   参与评论
  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

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (198人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------