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
<!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 {
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">46
var ym=0;47
var ny=0;48
createElement = 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
}54
mooz = {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].src71
});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].title78
});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
}109
document.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
}114
window.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
