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>