查看文章 |
超酷的三维展厅动画
2009年06月13日 星期六 00:16
<html> <head> <title>超酷的三维展厅动画</title> <meta http-equiv="content-Type" c> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #111; width: 100%; height: 100%; cursor: default; } #screen { position:absolute; left: 0%; top: 10%; width: 100%; height: 80%; background: #000; overflow: hidden; } #screen img { position: absolute; visibility: hidden; left: -10000px; filter: alpha(opacity=100); } #screen div { position: absolute; top: -10000px; font-family: verdana, arial, helvetica, sans-serif; font-weight: bold; text-align: center; filter: alpha(opacity=100); color: #FFF; } #screen .texturl { color: #FF8000; } </style> <script type="text/javascript"> var i3D = function() { /* ==== private variables and methods ==== */ var O = new Array(100); var N = 0; var scr = false; var xm = 0; var ym = 0; var cx = 0; var cy = -2000; var cz = 0; var zm = 0; var cr = 0; var nx = 0; var ny = 0; var nw = 0; var nh = 0; var cg = false; var mo = false; var path, FL, FS, Z, omob, hlb; /* ===== crossbrowsers events ==== */ function addEvent (o, e, f) { var r = false; if (window.addEventListener) { o.addEventListener(e, f, false); r = true; } else if (window.attachEvent) { r = o.attachEvent('on' + e, f); } return r; } /* ===== append HTML Element ==== */ function Append (tag, att, css) { var object = document.createElement(tag); for( var i in att) object[i] = att[i]; for( var i in css) object.style[i] = css[i]; this.appendChild(object); return object; } /* ===== window resize ==== */ function resize () { var o = scr; for (nx = 0, ny = 0; o != null; o = o.offsetParent) { nx += o.offsetLeft; ny += o.offsetTop; } nw = scr.offsetWidth; nh = scr.offsetHeight; } /* ==== cache xbrowser opacity ==== */ function initOpacity (o) { if (o.filters && o.filters.alpha) { o.alpha = o.filters.alpha; o.opacity = function (alpha) { this.alpha.opacity = Math.round(alpha); } } else { o.alpha = o.style; o.opacity = function (alpha) { this.alpha.opacity = alpha / 100; } } } /* ==== Image3D Constructor ==== */ function Image3D (param) { var options = param[4] || {}; /* ---- image Element ---- */ this.img = scr.append('img', { 'src' : path + param[0], 'onclick' : this.click, 'onmouseover' : this.mover, 'parent' : this } ); this.loaded = false; this.X = param[1]; this.Y = -param[2]; this.Z = param[3]; this.SX = options['zx'] || 1; this.SY = options['zy'] || this.SX; this.xb = 0; this.yb = 0; this.zb = 0; this.ab = 0; this.w2D = 0; this.h2D = 0; this.x2D = 0; this.y2D = 0; this.r = 0; /* ---- link ---- */ this.url = options['url'] || false; var txt = options['txt'] || ''; if (this.url) { txt += '<br><span class="texturl">' + this.url.replace('http://','') + '</span>'; this.img.style.cursor = 'pointer'; } this.icss = this.img.style; initOpacity(this.img); /* ---- text element ---- */ if (txt) { this.txt = scr.append('div', { 'innerHTML' : txt, 'onclick' : this.click, 'parent' : this }, {'width' : '1000px'} ); this.tp = -10000; this.tf = true; this.tcss = this.txt.style; initOpacity(this.txt); } O[N++] = this; } /* ==== prototype images functions ==== */ Image3D.prototype = { /* ---- hide non moving images ---- */ hide : function () { if (this.visible) { this.visible = false; this.img.style.width = '0px'; this.tp = -10000; } }, /* ---- hide text ---- */ txthide : function () { if (this.txtvisible) { this.txtvisible = false; this.txt.style.top = '-10000px'; this.tp = -10000; this.tf = true; } }, /* ---- images onmouseover ---- */ mover : function () { var that = this.parent; /* ---- hover ---- */ if (mo != this) { if (mo) mo.style.border = ""; mo = this; this.style.border = that.url ? hlb : omob; } /* ---- start animation text ---- */ if (that.tf && Math.abs(zm - cz) < 50) { that.tp = 0; that.tf = false; that.tcss.fontSize = (that.r * nh / FS) + 'px' } return false; }, /* ---- images onclick ---- */ click : function() { var that = this.parent; if (that.url) { /* ---- jump to hyperlink ---- */ window.location.href = that.url; } /* ---- go to image ---- */ zm = that.Z + 5; cg = true; return false; }, /* ==== main rendering function ==== */ display : function () { if (this.loaded) { /* ---- 3D coordinates ---- */ var x = this.X - cx; var y = this.Y - cy; var z = this.Z - cz; /* ---- animate text ---- */ if(this.tp > -200) { this.txtvisible = true; this.tp -= 2; this.tcss.left = Math.round(this.x2D + this.w2D * .5 - 500) + 'px'; this.tcss.top = (this.y2D + this.tp + this.h2D * .5) + 'px'; this.tcss.zIndex = Math.round(10000 - z); this.txt.opacity(200 + this.tp); } else this.txthide(); /* ---- image visible ---- */ if (z > 0) { /* ---- 3D to 2D transform ---- */ this.r = FL / (FL + (z * Z)); this.w2D = this.W * this.r * Z * this.SX; this.h2D = this.H * this.r * Z * this.SY; this.x2D = Math.floor((nw * .5) + (x * this.r * Z) - (this.w2D * .5)); this.y2D = Math.floor((nh * .5) + (y * this.r * Z) - this.h2D); /* ---- image in screen ---- */ if (this.x2D + this.w2D > 0 && this.x2D < nw) { this.visible = true; /* ---- image is moving ---- */ if (this.x2D != this.xb || this.y2D != this.yb || z != this.zb) { this.xb = this.x2D; this.yb = this.y2D; this.zb = z; /* ---- html rendering ---- */ this.icss.left = this.x2D + 'px'; this.icss.top = this.y2D + 'px'; this.icss.width = Math.ceil(this.w2D) + 'px'; this.icss.height = Math.ceil(this.h2D) + 'px'; this.icss.zIndex = Math.round(10000 - z); /* ---- fade in/out ---- */ var a = Math.max(0, Math.min(100, z)); if (a != this.ab) { this.ab = a; this.img.opacity(a); } } } else this.hide(); } else this.hide(); } else { /* ==== image onload ==== */ if (this.img.complete && this.img.width) { /* ---- get size image ---- */ this.W = this.img.width; this.H = this.img.height; this.loaded = true; this.img.style.visibility = 'visible'; } } } } /* ==== public methods ==== */ return { /* ---- initialize script ---- */ init : function (container, imagepath, focalLength, zoom, fontSize, onmouseover_border, hyperlink_border, structure) { /* ---- container ---- */ scr = document.getElementById(container); scr.append = Append; if (!scr) return false; /* ---- init ---- */ resize(); path = imagepath; FL = focalLength; FS = fontSize; Z = zoom; omob = onmouseover_border; hlb = hyperlink_border; xm = nx - (document.body.offsetWidth) + nw; ym = -ny - nh * .5; /* ---- camera xy position ---- */ addEvent(window.document, 'mousemove', function(e) { e = e || window.event; xm = nx - (e.clientX * 2) + nw; ym = -ny + (e.clientY * 2) - nh * 2; return false; }); /* ---- image onclick ---- */ addEvent(scr, 'click', function() { if (!cg) zm = 0; cg = false; return false; }); /* ---- window resize ---- */ addEvent(window, 'resize', resize); /* ---- mouse wheel - camera z position ---- */ if (window.addEventListener) scr.addEventListener('DOMMouseScroll', function(e) { zm += (e.detail * 40); return false; }, false); scr.onmousewheel = function () { zm += (-event.wheelDelta); return false; } /* ---- create objects ---- */ for (var i = 0, n = structure.length; i < n; i++) { var s = structure[i]; var options = s[4]; /* ---- repeat ---- */ var r = options ? options['repeat'] : false; if (r) { for (var j = 0, m = r[1]; j < m; j++) { var ok = new Image3D(s); s[r[0]] += r[2]; } } else var ok = new Image3D(s); } /* ---- launch script ---- */ setInterval(i3D.run, 16); }, /* ---- main loop ---- */ run : function () { /* ---- camera ease ---- */ cx -= Math.round((xm + cx) * .1); cy += Math.round((ym - cy) * .1); cz += Math.round((zm - cz) * .1); /* ---- display loop ---- */ var i = N; while (i--) O[i].display(); } } }(); /* ==== global onload ==== */ onload = function () { /* ---- build structure ---- i3D.init(container, path, focalLength, globalZoom, fontSize, onmouseover_border, hyperlink_border [image, x,y,z, {options}], ... ); options { 'zx':zoom x, 'xy': zoom y, 'url':hyperlink, 'txt':text 'repeat':[axis(1,2,3), number, increment] } */ i3D.init("screen", "http://www.dhteumeuleu.com/images/", 300, 1, 12, '#666 solid 1px', '#fff dotted 1px', [ ['bim.jpg', 0,20,1020, {'zx':9, 'zy':.5}], ['r4.gif', -1200,0,1000, {'txt':'duplicated'}], ['r29.gif', 700,0,1000, {'txt':'mechanomorphism'}], ['r15a.gif', -1100,0,900, {'txt':'amniocentetic'}], ['r59.gif', 600,0,500, {'txt':'asphericity'}], ['r39a.gif', -1000,0,200, {'txt':'onomatopoeia'}], ['r65.gif', -400,0,150, {'txt':'therianthrope'}], ['r39c.gif', 400,0,150, {'txt':'arboretum'}], ['r14.gif', 1200,0,250, {'txt':'heliotrope'}], ['r13.gif', 0,0,900, {'txt':'', 'url':'http://www.dhteumeuleu.com'}], ['r74.gif', -400,0,950, {'txt':'santorum'}], ['r74.gif', 400,0,950, {'txt':'taphephobia'}], ['r58c.gif', 700,0,800], ['r58c.gif', 1100,0,800], ['r46a.gif', 900,220,800, {'txt':'philatelical'}], ['r58b.gif', 900,-20,740, {'txt':'salmagundi'}], ['r8.gif', -600,0,800, {'txt':'diverticulectomy'}], ['r67.gif', -750,0,900, {'zx':0.8, 'txt':'cerebrotonic'}], ['r69.gif', -900,0,750, {'txt':'compersion'}], ['r69.gif', -300,0,750, {'txt':'epicaricacy'}], ['r72.gif', -600,0,600], ['r72.gif', -620,0,580, {'txt':'endomorphy'}], ['r22.gif', 0,0,600, {'txt':'rhamphorhynchus'}], ['r24.gif', 0,0,400, {'txt':'verisimilitudinous'}], ['r62.gif', 0,700,800, {'repeat':[3, 2, -400]}], ['r60.jpg', 0,900,1000, {'zx':3, 'zy':1, 'repeat':[3, 3, -400]}], ['r70.gif', 1100,0,600, {'txt':'lollygagger'}], ['r5.gif', -1200,300,600, {'txt':'homophilian'}], ['r6.gif', 1200,300,600, {'txt':'bysectamy'}], ['r54.gif', 0,0,100, {'txt':'iterator'}], ['r64.gif', 500,300,100], ['r38.gif', -900,0,350, {'txt':'protease'}], ['r51.gif', -600,0,400, {'txt':'gallipot'}], ['r52.gif', -300,0,250, {'txt':'temerarious'}], ['r50a.gif', -550,0,300, {'txt':'encyclopedia'}], ['r41.gif', -400,200,1000, {'txt':'paranoid'}], ['r43.gif', 300,400,1000, {'txt':'emboldened'}], ['r48.gif', 900,0,300, {'txt':'somnambulist'}], ['r58b.gif', 900,-20,250, {'txt':'miraculous'}], ['r63.gif', -1000,0,300, {'txt':'sufficiency'}], ['r63.gif', 650,0,320, {'txt':'biometric'}], ['r63.gif', 1000,0,980, {'txt':'baglady'}], ['Bush2.gif', -300,0,-200, {'repeat':[3, 3, -400]}], ['Bush2.gif', 300,0,-200, {'repeat':[3, 3, -400]}] ]); } </script> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div id="screen"></div> </body> </html> |
最近读者：
