登 录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /> <html><br /> <head><br /> <title>autumn II - interactive DHTML</title><br /> <meta name="Author" content="Gerard Ferrandez"><br /> <meta http-equiv="imagetoolbar" content="no"><br /> <mce:style type="text/css"><!--<br /> html {<br /> overflow: hidden;<br /> }<br /> body {<br /> position: absolute;<br /> margin: 0px;<br /> padding: 0px;<br /> background: #111;<br /> width: 100%;<br /> height: 100%;<br /> }<br /> #screen {<br /> position: absolute;<br /> left: 10%;<br /> top: 10%;<br /> width: 80%;<br /> height: 80%;<br /> background: #000;<br /> }<br /> #screen img {<br /> position: absolute;<br /> cursor: pointer;<br /> visibility: hidden;<br /> width: 0px;<br /> height: 0px;<br /> }<br /> #screen .tvover {<br /> border: solid #876;<br /> opacity: 1;<br /> filter: alpha(opacity=100);<br /> }<br /> #screen .tvout {<br /> border: solid #fff;<br /> opacity: 0.7;<br /> }<br /> #bankImages {<br /> display: none;<br /> }<br /> --></mce:style><style type="text/css" mce_bogus="1"> html {<br /> overflow: hidden;<br /> }<br /> body {<br /> position: absolute;<br /> margin: 0px;<br /> padding: 0px;<br /> background: #111;<br /> width: 100%;<br /> height: 100%;<br /> }<br /> #screen {<br /> position: absolute;<br /> left: 10%;<br /> top: 10%;<br /> width: 80%;<br /> height: 80%;<br /> background: #000;<br /> }<br /> #screen img {<br /> position: absolute;<br /> cursor: pointer;<br /> visibility: hidden;<br /> width: 0px;<br /> height: 0px;<br /> }<br /> #screen .tvover {<br /> border: solid #876;<br /> opacity: 1;<br /> filter: alpha(opacity=100);<br /> }<br /> #screen .tvout {<br /> border: solid #fff;<br /> opacity: 0.7;<br /> }<br /> #bankImages {<br /> display: none;<br /> }</style><br /> <mce:script type="text/javascript"><!--<br /> // =============================================================<br /> // ===== photo 3D =====<br /> // script written by Gerard Ferrandez - October 21th, 2007<br /> // http://www.dhteumeuleu.com<br /> // =============================================================<br /> /* ==== library ==== */<br /> var Library = {};<br /> Library.ease = function () {<br /> this.target = 0;<br /> this.position = 0;<br /> this.move = function (target, speed)<br /> {<br /> this.position += (target - this.position) * speed;<br /> }<br /> }<br /> var tv = {<br /> /* ==== variables ==== */<br /> O : [],<br /> screen : {},<br /> grid : {<br /> size : 4, // 4x4 grid<br /> borderSize : 6, // borders size<br /> zoomed : false<br /> },<br /> angle : {<br /> x : new Library.ease(),<br /> y : new Library.ease()<br /> },<br /> camera : {<br /> x : new Library.ease(),<br /> y : new Library.ease(),<br /> zoom : new Library.ease(),<br /> focalLength : 750 // camera Focal Length<br /> },</p> <p> /* ==== init script ==== */<br /> init : function ()<br /> {<br /> this.screen.obj = document.getElementById('screen');<br /> var img = document.getElementById('bankImages').getElementsByTagName('img');<br /> this.screen.obj.onselectstart = function () { return false; }<br /> this.screen.obj.ondrag = function () { return false; }<br /> /* ==== create images grid ==== */<br /> var ni = 0;<br /> var n = (tv.grid.size / 2) - .5;<br /> for (var y = -n; y <= n; y++)<br /> {<br /> for (var x = -n; x <= n; x++)<br /> {<br /> /* ==== create HTML image element ==== */<br /> var o = document.createElement('img');<br /> var i = img[(ni++) % img.length];<br /> o.className = 'tvout';<br /> o.src = i.src;<br /> tv.screen.obj.appendChild(o);<br /> /* ==== 3D coordinates ==== */<br /> o.point3D = {<br /> x : x,<br /> y : y,<br /> z : new Library.ease()<br /> };<br /> /* ==== push object ==== */<br /> o.point2D = {};<br /> o.ratioImage = 1;<br /> tv.O.push(o);<br /> /* ==== on mouse over event ==== */<br /> o.onmouseover = function ()<br /> {<br /> if (!tv.grid.zoomed)<br /> {<br /> if (tv.o)<br /> {<br /> /* ==== mouse out ==== */<br /> tv.o.point3D.z.target = 0;<br /> tv.o.className = 'tvout';<br /> }<br /> /* ==== mouse over ==== */<br /> this.className = 'tvover';<br /> this.point3D.z.target = -.5;<br /> tv.o = this;<br /> }<br /> }<br /> /* ==== on click event ==== */<br /> o.onclick = function ()<br /> {<br /> if (!tv.grid.zoomed)<br /> {<br /> /* ==== zoom in ==== */<br /> tv.camera.x.target = this.point3D.x;<br /> tv.camera.y.target = this.point3D.y;<br /> tv.camera.zoom.target = tv.screen.w * 1.25;<br /> tv.grid.zoomed = this;<br /> } else {<br /> if (this == tv.grid.zoomed){<br /> /* ==== zoom out ==== */<br /> tv.camera.x.target = 0;<br /> tv.camera.y.target = 0;<br /> tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);<br /> tv.grid.zoomed = false;<br /> }<br /> }<br /> }<br /> /* ==== 3D transform function ==== */<br /> o.calc = function ()<br /> {<br /> /* ==== ease mouseover ==== */<br /> this.point3D.z.move(this.point3D.z.target, .5);<br /> /* ==== assign 3D coords ==== */<br /> var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;<br /> var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;<br /> var z = this.point3D.z.position * tv.camera.zoom.position;<br /> /* ==== perform rotations ==== */<br /> var xy = tv.angle.cx * y - tv.angle.sx * z;<br /> var xz = tv.angle.sx * y + tv.angle.cx * z;<br /> var yz = tv.angle.cy * xz - tv.angle.sy * x;<br /> var yx = tv.angle.sy * xz + tv.angle.cy * x;<br /> /* ==== 2D transformation ==== */<br /> this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);<br /> this.point2D.x = yx * this.point2D.scale;<br /> this.point2D.y = xy * this.point2D.scale;<br /> this.point2D.w = Math.round(<br /> Math.max(<br /> 0,<br /> this.point2D.scale * tv.camera.zoom.position * .8<br /> )<br /> );<br /> /* ==== image size ratio ==== */<br /> if (this.ratioImage > 1)<br /> this.point2D.h = Math.round(this.point2D.w / this.ratioImage);<br /> else<br /> {<br /> this.point2D.h = this.point2D.w;<br /> this.point2D.w = Math.round(this.point2D.h * this.ratioImage);<br /> }<br /> }<br /> /* ==== rendering ==== */<br /> o.draw = function ()<br /> {<br /> if (this.complete)<br /> {<br /> /* ==== paranoid image load ==== */<br /> if (!this.loaded)<br /> {<br /> if (!this.img)<br /> {<br /> /* ==== create internal image ==== */<br /> this.img = new Image();<br /> this.img.src = this.src;<br /> }<br /> if (this.img.complete)<br /> {<br /> /* ==== get width / height ratio ==== */<br /> this.style.visibility = 'visible';<br /> this.ratioImage = this.img.width / this.img.height;<br /> this.loaded = true;<br /> this.img = false;<br /> }<br /> }<br /> /* ==== HTML rendering ==== */<br /> this.style.left = Math.round(<br /> this.point2D.x * this.point2D.scale +<br /> tv.screen.w - this.point2D.w * .5<br /> ) + 'px';<br /> this.style.top = Math.round(<br /> this.point2D.y * this.point2D.scale +<br /> tv.screen.h - this.point2D.h * .5<br /> ) + 'px';<br /> this.style.width = this.point2D.w + 'px';<br /> this.style.height = this.point2D.h + 'px';<br /> this.style.borderWidth = Math.round(<br /> Math.max(<br /> this.point2D.w,<br /> this.point2D.h<br /> ) * tv.grid.borderSize * .01<br /> ) + 'px';<br /> this.style.zIndex = Math.floor(this.point2D.scale * 100);<br /> }<br /> }<br /> }<br /> }<br /> /* ==== start script ==== */<br /> tv.resize();<br /> mouse.y = tv.screen.y + tv.screen.h;<br /> mouse.x = tv.screen.x + tv.screen.w;<br /> tv.run();<br /> },</p> <p> /* ==== resize window ==== */<br /> resize : function ()<br /> {<br /> var o = tv.screen.obj;<br /> tv.screen.w = o.offsetWidth / 2;<br /> tv.screen.h = o.offsetHeight / 2;<br /> tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);<br /> for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)<br /> {<br /> tv.screen.x += o.offsetLeft;<br /> tv.screen.y += o.offsetTop;<br /> }<br /> },<br /> /* ==== main loop ==== */<br /> run : function ()<br /> {<br /> /* ==== motion ease ==== */<br /> tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);<br /> tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);<br /> tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);<br /> tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);<br /> tv.camera.zoom.move(tv.camera.zoom.target, .05);<br /> /* ==== angles sin and cos ==== */<br /> tv.angle.cx = Math.cos(tv.angle.x.position);<br /> tv.angle.sx = Math.sin(tv.angle.x.position);<br /> tv.angle.cy = Math.cos(tv.angle.y.position);<br /> tv.angle.sy = Math.sin(tv.angle.y.position);<br /> /* ==== loop through all images ==== */<br /> for (var i = 0, o; o = tv.O[i]; i++)<br /> {<br /> o.calc();<br /> o.draw();<br /> }<br /> /* ==== loop ==== */<br /> setTimeout(tv.run, 32);<br /> }<br /> }<br /> /* ==== global mouse position ==== */<br /> var mouse = {<br /> x : 0,<br /> y : 0<br /> }<br /> document.onmousemove = function(e)<br /> {<br /> if (window.event) e = window.event;<br /> mouse.x = e.clientX;<br /> mouse.y = e.clientY;<br /> return false;<br /> }<br /> // --></mce:script><br /> </head><br /> <body><br /> <div id="screen"></div><br /> <div id="bankImages"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wi23.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wi23.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt06.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt06.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt47.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt47.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt16.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt16.jpg"></p> <p> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt43.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt43.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt19.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt19.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt27.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt27.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt46.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt46.jpg"></p> <p> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt14.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt14.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt21.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt21.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt35.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt35.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt48.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt48.jpg"></p> <p> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt55.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt55.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt40.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt40.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt53.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt53.jpg"><br /> <img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt25.jpg" mce_src="http://www.webkey.cn/demo/docs/photo3d/images/wt25.jpg"></p> <p></div><br /> <mce:script type="text/javascript"><!--<br /> /* ==== start script ==== */<br /> onresize = tv.resize;<br /> tv.init();<br /> // --></mce:script><br /> </body><br /> </html><br /> <a href="http://www.okajax.com/" mce_href="http://www.okajax.com/"><font color="#ffffff">欢迎访问Ajax中国</font></a>
抱歉!评论已关闭.