1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 <title>超酷超绚精美图片展示效果代码(六) - 网页特效观止-网页特效代码|JsCode.CN|</title>
7 <style type="text/css">
8 html {
9 overflow: hidden;
10 }
11 body {
12 position: absolute;
13 margin: 0px;
14 padding: 0px;
15 background: #111;
16 width: 100%;
17 height: 100%;
18 }
19 #screen {
20 position: absolute;
21 left: 10%;
22 top: 10%;
23 width: 80%;
24 height: 80%;
25 background: #000;
26 }
27 #screen img {
28 position: absolute;
29 cursor: pointer;
30 visibility: hidden;
31 width: 0px;
32 height: 0px;
33 }
34 #screen .tvover {
35 border: solid #876;
36 opacity: 1;
37 filter: alpha(opacity=100);
38 }
39 #screen .tvout {
40 border: solid #fff;
41 opacity: 0.7;
42 }
43 #bankImages {
44 display: none;
45 }
46 </style>
47 <script type="text/javascript">
48 var Library = {};
49 Library.ease = function () {
50 this.target = 0;
51 this.position = 0;
52 this.move = function (target, speed)
53 {
54 this.position += (target - this.position) * speed;
55 }
56 }
57
58 var tv = {
59 /* ==== variables ==== */
60 O : [],
61 screen : {},
62 grid : {
63 size : 4, // 4x4 grid
64 borderSize : 6, // borders size
65 zoomed : false
66 },
67 angle : {
68 x : new Library.ease(),
69 y : new Library.ease()
70 },
71 camera : {
72 x : new Library.ease(),
73 y : new Library.ease(),
74 zoom : new Library.ease(),
75 focalLength : 750 // camera Focal Length
76 },
77
78 /* ==== init script ==== */
79 init : function ()
80 {
81 this.screen.obj = document.getElementById('screen');
82 var img = document.getElementById('bankImages').getElementsByTagName('img');
83 this.screen.obj.onselectstart = function () { return false; }
84 this.screen.obj.ondrag = function () { return false; }
85 /* ==== create images grid ==== */
86 var ni = 0;
87 var n = (tv.grid.size / 2) - .5;
88 for (var y = -n; y <= n; y++)
89 {
90 for (var x = -n; x <= n; x++)
91 {
92 /* ==== create HTML image element ==== */
93 var o = document.createElement('img');
94 var i = img[(ni++) % img.length];
95 o.className = 'tvout';
96 o.src = i.src;
97 tv.screen.obj.appendChild(o);
98 /* ==== 3D coordinates ==== */
99 o.point3D = {
100 x : x,
101 y : y,
102 z : new Library.ease()
103 };
104 /* ==== push object ==== */
105 o.point2D = {};
106 o.ratioImage = 1;
107 tv.O.push(o);
108 /* ==== on mouse over event ==== */
109 o.onmouseover = function ()
110 {
111 if (!tv.grid.zoomed)
112 {
113 if (tv.o)
114 {
115 /* ==== mouse out ==== */
116 tv.o.point3D.z.target = 0;
117 tv.o.className = 'tvout';
118 }
119 /* ==== mouse over ==== */
120 this.className = 'tvover';
121 this.point3D.z.target = -.5;
122 tv.o = this;
123 }
124 }
125 /* ==== on click event ==== */
126 o.onclick = function ()
127 {
128 if (!tv.grid.zoomed)
129 {
130 /* ==== zoom in ==== */
131 tv.camera.x.target = this.point3D.x;
132 tv.camera.y.target = this.point3D.y;
133 tv.camera.zoom.target = tv.screen.w * 1.25;
134 tv.grid.zoomed = this;
135 } else {
136 if (this == tv.grid.zoomed){
137 /* ==== zoom out ==== */
138 tv.camera.x.target = 0;
139 tv.camera.y.target = 0;
140 tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
141 tv.grid.zoomed = false;
142 }
143 }
144 }
145 /* ==== 3D transform function ==== */
146 o.calc = function ()
147 {
148 /* ==== ease mouseover ==== */
149 this.point3D.z.move(this.point3D.z.target, .5);
150 /* ==== assign 3D coords ==== */
151 var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
152 var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
153 var z = this.point3D.z.position * tv.camera.zoom.position;
154 /* ==== perform rotations ==== */
155 var xy = tv.angle.cx * y - tv.angle.sx * z;
156 var xz = tv.angle.sx * y + tv.angle.cx * z;
157 var yz = tv.angle.cy * xz - tv.angle.sy * x;
158 var yx = tv.angle.sy * xz + tv.angle.cy * x;
159 /* ==== 2D transformation ==== */
160 this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
161 this.point2D.x = yx * this.point2D.scale;
162 this.point2D.y = xy * this.point2D.scale;
163 this.point2D.w = Math.round(
164 Math.max(
165 0,
166 this.point2D.scale * tv.camera.zoom.position * .8
167 )
168 );
169 /* ==== image size ratio ==== */
170 if (this.ratioImage > 1)
171 this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
172 else
173 {
174 this.point2D.h = this.point2D.w;
175 this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
176 }
177 }
178 /* ==== rendering ==== */
179 o.draw = function ()
180 {
181 if (this.complete)
182 {
183 /* ==== paranoid image load ==== */
184 if (!this.loaded)
185 {
186 if (!this.img)
187 {
188 /* ==== create internal image ==== */
189 this.img = new Image();
190 this.img.src = this.src;
191 }
192 if (this.img.complete)
193 {
194 /* ==== get width / height ratio ==== */
195 this.style.visibility = 'visible';
196 this.ratioImage = this.img.width / this.img.height;
197 this.loaded = true;
198 this.img = false;
199 }
200 }
201 /* ==== HTML rendering ==== */
202 this.style.left = Math.round(
203 this.point2D.x * this.point2D.scale +
204 tv.screen.w - this.point2D.w * .5
205 ) + 'px';
206 this.style.top = Math.round(
207 this.point2D.y * this.point2D.scale +
208 tv.screen.h - this.point2D.h * .5
209 ) + 'px';
210 this.style.width = this.point2D.w + 'px';
211 this.style.height = this.point2D.h + 'px';
212 this.style.borderWidth = Math.round(
213 Math.max(
214 this.point2D.w,
215 this.point2D.h
216 ) * tv.grid.borderSize * .01
217 ) + 'px';
218 this.style.zIndex = Math.floor(this.point2D.scale * 100);
219 }
220 }
221 }
222 }
223 /* ==== start script ==== */
224 tv.resize();
225 mouse.y = tv.screen.y + tv.screen.h;
226 mouse.x = tv.screen.x + tv.screen.w;
227 tv.run();
228 },
229
230 /* ==== resize window ==== */
231 resize : function ()
232 {
233 var o = tv.screen.obj;
234 tv.screen.w = o.offsetWidth / 2;
235 tv.screen.h = o.offsetHeight / 2;
236 tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
237 for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
238 {
239 tv.screen.x += o.offsetLeft;
240 tv.screen.y += o.offsetTop;
241 }
242 },
243
244 /* ==== main loop ==== */
245 run : function ()
246 {
247 /* ==== motion ease ==== */
248 tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
249 tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
250 tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
251 tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
252 tv.camera.zoom.move(tv.camera.zoom.target, .05);
253 /* ==== angles sin and cos ==== */
254 tv.angle.cx = Math.cos(tv.angle.x.position);
255 tv.angle.sx = Math.sin(tv.angle.x.position);
256 tv.angle.cy = Math.cos(tv.angle.y.position);
257 tv.angle.sy = Math.sin(tv.angle.y.position);
258 /* ==== loop through all images ==== */
259 for (var i = 0, o; o = tv.O[i]; i++)
260 {
261 o.calc();
262 o.draw();
263 }
264 /* ==== loop ==== */
265 setTimeout(tv.run, 32);
266 }
267 }
268
269 /* ==== global mouse position ==== */
270 var mouse = {
271 x : 0,
272 y : 0
273 }
274 document.onmousemove = function(e)
275 {
276 if (window.event) e = window.event;
277 mouse.x = e.clientX;
278 mouse.y = e.clientY;
279 return false;
280 }
281
282 </script>
283 </head>
284
285 <body>
286
287 <div id="screen">
288 </div>
289 <div id="bankImages">
290 <img alt="" src="2764450_130035075_2.jpg">
291 <img alt="" src="2764450_130035075_2.jpg">
292 <img alt="" src="2764450_130035075_2.jpg">
293 <img alt="" src="2764450_130035075_2.jpg">
294 <img alt="" src="2764450_130035075_2.jpg">
295 <img alt="" src="2764450_130035075_2.jpg">
296 <img alt="" src="2764450_130035075_2.jpg">
297 <img alt="" src="2764450_130035075_2.jpg">
298 <img alt="" src="2764450_130035075_2.jpg">
299 <img alt="" src="2764450_130035075_2.jpg">
300 <img alt="" src="2764450_130035075_2.jpg">
301 <img alt="" src="2764450_130035075_2.jpg">
302 <img alt="" src="2764450_130035075_2.jpg">
303 <img alt="" src="2764450_130035075_2.jpg">
304 <img alt="" src="2764450_130035075_2.jpg">
305 <img alt="" src="2764450_130035075_2.jpg"> </div>
306 <script type="text/javascript">
307 /* ==== start script ==== */
308 onresize = tv.resize;
309 tv.init();
310 </script>
311
312 </body>
313
314 </html>
浙公网安备 33010602011771号