超酷超绚精美图片展示效果代码(十)
from: http://www.jscode.cn/jave_img/350808735.htm
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 <meta http-equiv="imagetoolbar" content="no">
8 <style type="text/css">
9 body {
10 background: #222;
11 overflow: hidden;
12 left: 0;
13 top: 0;
14 width: 100%;
15 height: 100%;
16 margin: 0;
17 padding: 0;
18 }
19 #screen span {
20 position:absolute;
21 overflow:hidden;
22 border:#FFF solid 1px;
23 background:#FFF;
24 }
25 #screen img{
26 position:absolute;
27 left:-32px;
28 top:-32px;
29 cursor: pointer;
30 }
31 #caption, #title{
32 color: #FFF;
33 font-family: georgia, 'times new roman', times, veronica, serif;
34 font-size: 1em;
35 text-align: center;
36 }
37 #caption b {
38 font-size: 2em;
39 }
40
41 </style>
42 <script type="text/javascript"><!--
43 window.onerror = new Function("return true");
44 var obj = [];
45 var scr;
46 var spa;
47 var img;
48 var W;
49 var Wi;
50 var Hi;
51 var wi;
52 var hi;
53 var Sx;
54 var Sy;
55 var M;
56 var xm;
57 var ym;
58 var xb = 0;
59 var yb = 0;
60 var ob = - 1;
61 var cl = false;
62
63 /* needed in standard mode */
64 px = function(x)
65 {
66 return Math.round(x) + "px";
67 }
68
69 /* center image - do not resize for perf. reason */
70 img_center = function(o)
71 {
72 with(img[o])
73 {
74 style.left = px( - (width - Wi) / 2);
75 style.top = px( - (height - Hi) / 2);
76 }
77 }
78
79 //////////////////////////////////////////////////////////
80 var Nx = 4; //size grid x
81 var Ny = 4; //size grid y
82 var Tx = 3; // image width
83 var Ty = 3; // image height
84 var Mg = 40; // margin
85 var SP = 1; // speed
86 //////////////////////////////////////////////////////////
87
88 function Cobj(o, x, y)
89 {
90 this.o = o;
91 this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));
92 this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));
93 this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;
94 this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;
95 this.l = 0;
96 this.t = 0;
97 this.w = 0;
98 this.h = 0;
99 this.s = 0;
100 this.mv = false;
101 this.spa = spa[o].style;
102 this.img = img[o];
103 this.txt = img[o].alt;
104 img[o].alt = "";
105
106 /* zooming loop */
107 this.zoom = function()
108 {
109 with(this)
110 {
111 l += li * s;
112 t += ti * s;
113 w += wi * s;
114 h += hi * s;
115 if ((s > 0 && w < Wi) || (s < 0 && w > Sx))
116 {
117 /* force window.event */
118 window.focus();
119 /* loop */
120 setTimeout("obj[" + o + "].zoom()", 16);
121 }
122 else
123 {
124 /* finished */
125 mv = false;
126 /* set final position */
127 if (s > 0)
128 {
129 l = ix * M + ix * Sx;
130 t = iy * M + iy * Sy;
131 w = Wi;
132 h = Hi;
133 }
134 else
135 {
136 l = x * M + x * Sx;
137 t = y * M + y * Sy;
138 w = Sx;
139 h = Sy;
140 }
141 }
142 /* html animation */
143 with(spa)
144 {
145 left = px(l);
146 top = px(t);
147 width = px(w);
148 height = px(h);
149 zIndex = Math.round(w);
150 }
151 }
152 }
153
154 this.click = function()
155 {
156 with(this)
157 {
158 img_center(o);
159 /* zooming logic */
160 if ( ! mv || cl)
161 {
162 if (s > 0)
163 {
164 if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4)
165 {
166 s = - 2;
167 mv = true;
168 zoom();
169 cap.innerHTML = txt;
170 }
171 }
172 else
173 {
174 if (cl || ob != o)
175 {
176 if (ob >= 0)
177 {
178 with(obj[ob])
179 {
180 s = - 2;
181 mv = true;
182 zoom();
183 }
184 }
185 ob = o;
186 s = 1;
187 xb = xm;
188 yb = ym;
189 mv = true;
190 zoom();
191 cap.innerHTML = txt;
192 }
193 }
194 }
195 }
196 }
197
198 /* hook up events */
199 img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");
200 img[o].onclick = new Function("cl=true;obj[" + o + "].click()");
201 img[o].onload = new Function("img_center(" + o + ")");
202
203 /* initial display */
204 this.zoom();
205 }
206
207 /* mouse */
208 document.onmousemove = function(e)
209 {
210 if ( ! e)
211 {
212 e = window.event;
213 }
214 xm = (e.x || e.clientX);
215 ym = (e.y || e.clientY);
216 }
217
218 /* init */
219 function load()
220 {
221 /* html elements */
222 scr = document.getElementById("screen");
223 spa = scr.getElementsByTagName("span");
224 img = scr.getElementsByTagName("img");
225 cap = document.getElementById("caption");
226
227 /* mouseover border */
228 document.getElementById("border").onmouseover = function()
229 {
230 cl = true;
231 if(ob >= 0 && obj[ob].s > 0) obj[ob].click();
232 ob = -1;
233 }
234
235 /* global variables */
236 W = parseInt(scr.style.width);
237 H = parseInt(scr.style.height);
238 M = W / Mg;
239 Sx = (W - (Nx - 1) * M) / Nx;
240 Sy = (H - (Ny - 1) * M) / Ny;
241 Wi = Tx * Sx + (Tx - 1) * M;
242 Hi = Ty * Sy + (Ty - 1) * M;
243 SP = M * Tx * SP;
244 wi = (Wi - Sx) / SP;
245 hi = (Hi - Sy) / SP;
246
247 /* create objects */
248 for (k = 0, i = 0; i < Nx; i ++)
249 {
250 for (j = 0; j < Ny; j ++)
251 {
252 obj[k] = new Cobj(k ++, i, j);
253 }
254 }
255 }
256 //-->
257 </script>
258 </head>
259
260 <body>
261
262 <div style="position: absolute; left: 50%; top: 50%;">
263 <div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;">
264 </div>
265 <div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
266 </div>
267 <div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
268 <span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;">
269 <img style="left: -11px; top: -9px;" src="images/08081201001.jpg" alt=""></span>
270 <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;">
271 <img style="left: -11px; top: -8px;" src="images/08081201002.jpg" alt=""></span>
272 <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;">
273 <img style="left: -11px; top: -9px;" src="images/08081201003.jpg" alt=""></span>
274 <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;">
275 <img style="left: -11px; top: -9px;" src="images/08081201004.jpg" alt=""></span>
276 <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;">
277 <img style="left: -11px; top: -9px;" src="images/08081201005.jpg" alt=""></span>
278 <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;">
279 <img style="left: -11px; top: -9px;" src="images/08081201006.jpg" alt=""></span>
280 <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;">
281 <img style="left: -11px; top: -9px;" src="images/08081201008.jpg" alt=""></span>
282 <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;">
283 <img style="left: -11px; top: -9px;" src="images/08081201009.jpg" alt=""></span>
284 <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;">
285 <img style="left: -11px; top: -9px;" src="images/08081201010.jpg" alt=""></span>
286 <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;">
287 <img style="left: -11px; top: -9px;" src="images/08081201011.jpg" alt=""></span>
288 <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;">
289 <img style="left: -11px; top: -9px;" src="images/08081201012.jpg" alt=""></span>
290 <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;">
291 <img style="left: -11px; top: -9px;" src="images/08081201001.jpg" alt=""></span>
292 <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;">
293 <img style="left: -11px; top: -9px;" src="images/08081201013.jpg" alt=""></span>
294 <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;">
295 <img style="left: -11px; top: -9px;" src="images/08081201014.jpg" alt=""></span>
296 <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;">
297 <img style="left: -11px; top: -9px;" src="images/08081204wi21.jpg" alt=""></span>
298 <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;">
299 <img style="left: -11px; top: -9px;" src="images/08081204wi42.jpg" alt=""></span>
300 </div>
301 <div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;">
302 <b>carefully</b> weight the options</div>
303 </div>
304 <script type="text/javascript"><!--
305 // starter
306 load();
307 //-->
308 </script>
309
310 </body>
311
312 </html>
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 <meta http-equiv="imagetoolbar" content="no">
8 <style type="text/css">
9 body {
10 background: #222;
11 overflow: hidden;
12 left: 0;
13 top: 0;
14 width: 100%;
15 height: 100%;
16 margin: 0;
17 padding: 0;
18 }
19 #screen span {
20 position:absolute;
21 overflow:hidden;
22 border:#FFF solid 1px;
23 background:#FFF;
24 }
25 #screen img{
26 position:absolute;
27 left:-32px;
28 top:-32px;
29 cursor: pointer;
30 }
31 #caption, #title{
32 color: #FFF;
33 font-family: georgia, 'times new roman', times, veronica, serif;
34 font-size: 1em;
35 text-align: center;
36 }
37 #caption b {
38 font-size: 2em;
39 }
40
41 </style>
42 <script type="text/javascript"><!--
43 window.onerror = new Function("return true");
44 var obj = [];
45 var scr;
46 var spa;
47 var img;
48 var W;
49 var Wi;
50 var Hi;
51 var wi;
52 var hi;
53 var Sx;
54 var Sy;
55 var M;
56 var xm;
57 var ym;
58 var xb = 0;
59 var yb = 0;
60 var ob = - 1;
61 var cl = false;
62
63 /* needed in standard mode */
64 px = function(x)
65 {
66 return Math.round(x) + "px";
67 }
68
69 /* center image - do not resize for perf. reason */
70 img_center = function(o)
71 {
72 with(img[o])
73 {
74 style.left = px( - (width - Wi) / 2);
75 style.top = px( - (height - Hi) / 2);
76 }
77 }
78
79 //////////////////////////////////////////////////////////
80 var Nx = 4; //size grid x
81 var Ny = 4; //size grid y
82 var Tx = 3; // image width
83 var Ty = 3; // image height
84 var Mg = 40; // margin
85 var SP = 1; // speed
86 //////////////////////////////////////////////////////////
87
88 function Cobj(o, x, y)
89 {
90 this.o = o;
91 this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));
92 this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));
93 this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;
94 this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;
95 this.l = 0;
96 this.t = 0;
97 this.w = 0;
98 this.h = 0;
99 this.s = 0;
100 this.mv = false;
101 this.spa = spa[o].style;
102 this.img = img[o];
103 this.txt = img[o].alt;
104 img[o].alt = "";
105
106 /* zooming loop */
107 this.zoom = function()
108 {
109 with(this)
110 {
111 l += li * s;
112 t += ti * s;
113 w += wi * s;
114 h += hi * s;
115 if ((s > 0 && w < Wi) || (s < 0 && w > Sx))
116 {
117 /* force window.event */
118 window.focus();
119 /* loop */
120 setTimeout("obj[" + o + "].zoom()", 16);
121 }
122 else
123 {
124 /* finished */
125 mv = false;
126 /* set final position */
127 if (s > 0)
128 {
129 l = ix * M + ix * Sx;
130 t = iy * M + iy * Sy;
131 w = Wi;
132 h = Hi;
133 }
134 else
135 {
136 l = x * M + x * Sx;
137 t = y * M + y * Sy;
138 w = Sx;
139 h = Sy;
140 }
141 }
142 /* html animation */
143 with(spa)
144 {
145 left = px(l);
146 top = px(t);
147 width = px(w);
148 height = px(h);
149 zIndex = Math.round(w);
150 }
151 }
152 }
153
154 this.click = function()
155 {
156 with(this)
157 {
158 img_center(o);
159 /* zooming logic */
160 if ( ! mv || cl)
161 {
162 if (s > 0)
163 {
164 if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4)
165 {
166 s = - 2;
167 mv = true;
168 zoom();
169 cap.innerHTML = txt;
170 }
171 }
172 else
173 {
174 if (cl || ob != o)
175 {
176 if (ob >= 0)
177 {
178 with(obj[ob])
179 {
180 s = - 2;
181 mv = true;
182 zoom();
183 }
184 }
185 ob = o;
186 s = 1;
187 xb = xm;
188 yb = ym;
189 mv = true;
190 zoom();
191 cap.innerHTML = txt;
192 }
193 }
194 }
195 }
196 }
197
198 /* hook up events */
199 img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");
200 img[o].onclick = new Function("cl=true;obj[" + o + "].click()");
201 img[o].onload = new Function("img_center(" + o + ")");
202
203 /* initial display */
204 this.zoom();
205 }
206
207 /* mouse */
208 document.onmousemove = function(e)
209 {
210 if ( ! e)
211 {
212 e = window.event;
213 }
214 xm = (e.x || e.clientX);
215 ym = (e.y || e.clientY);
216 }
217
218 /* init */
219 function load()
220 {
221 /* html elements */
222 scr = document.getElementById("screen");
223 spa = scr.getElementsByTagName("span");
224 img = scr.getElementsByTagName("img");
225 cap = document.getElementById("caption");
226
227 /* mouseover border */
228 document.getElementById("border").onmouseover = function()
229 {
230 cl = true;
231 if(ob >= 0 && obj[ob].s > 0) obj[ob].click();
232 ob = -1;
233 }
234
235 /* global variables */
236 W = parseInt(scr.style.width);
237 H = parseInt(scr.style.height);
238 M = W / Mg;
239 Sx = (W - (Nx - 1) * M) / Nx;
240 Sy = (H - (Ny - 1) * M) / Ny;
241 Wi = Tx * Sx + (Tx - 1) * M;
242 Hi = Ty * Sy + (Ty - 1) * M;
243 SP = M * Tx * SP;
244 wi = (Wi - Sx) / SP;
245 hi = (Hi - Sy) / SP;
246
247 /* create objects */
248 for (k = 0, i = 0; i < Nx; i ++)
249 {
250 for (j = 0; j < Ny; j ++)
251 {
252 obj[k] = new Cobj(k ++, i, j);
253 }
254 }
255 }
256 //-->
257 </script>
258 </head>
259
260 <body>
261
262 <div style="position: absolute; left: 50%; top: 50%;">
263 <div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;">
264 </div>
265 <div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
266 </div>
267 <div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
268 <span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;">
269 <img style="left: -11px; top: -9px;" src="images/08081201001.jpg" alt=""></span>
270 <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;">
271 <img style="left: -11px; top: -8px;" src="images/08081201002.jpg" alt=""></span>
272 <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;">
273 <img style="left: -11px; top: -9px;" src="images/08081201003.jpg" alt=""></span>
274 <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;">
275 <img style="left: -11px; top: -9px;" src="images/08081201004.jpg" alt=""></span>
276 <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;">
277 <img style="left: -11px; top: -9px;" src="images/08081201005.jpg" alt=""></span>
278 <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;">
279 <img style="left: -11px; top: -9px;" src="images/08081201006.jpg" alt=""></span>
280 <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;">
281 <img style="left: -11px; top: -9px;" src="images/08081201008.jpg" alt=""></span>
282 <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;">
283 <img style="left: -11px; top: -9px;" src="images/08081201009.jpg" alt=""></span>
284 <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;">
285 <img style="left: -11px; top: -9px;" src="images/08081201010.jpg" alt=""></span>
286 <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;">
287 <img style="left: -11px; top: -9px;" src="images/08081201011.jpg" alt=""></span>
288 <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;">
289 <img style="left: -11px; top: -9px;" src="images/08081201012.jpg" alt=""></span>
290 <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;">
291 <img style="left: -11px; top: -9px;" src="images/08081201001.jpg" alt=""></span>
292 <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;">
293 <img style="left: -11px; top: -9px;" src="images/08081201013.jpg" alt=""></span>
294 <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;">
295 <img style="left: -11px; top: -9px;" src="images/08081201014.jpg" alt=""></span>
296 <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;">
297 <img style="left: -11px; top: -9px;" src="images/08081204wi21.jpg" alt=""></span>
298 <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;">
299 <img style="left: -11px; top: -9px;" src="images/08081204wi42.jpg" alt=""></span>
300 </div>
301 <div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;">
302 <b>carefully</b> weight the options</div>
303 </div>
304 <script type="text/javascript"><!--
305 // starter
306 load();
307 //-->
308 </script>
309
310 </body>
311
312 </html>
