js模擬3D場景效果代碼打包

更新時間：2012年01月04日 17:36:28 作者：

這幾個demo上星期平安夜做的，感覺效果不錯，就放在出來，分享給大家

要在二維空間模擬出三維的效果，就需要把三維的坐標轉(zhuǎn)換成二維坐標。一個最基本依據(jù)是：東西越遠，看到大小就越小，坐標越往消失點靠攏。
　　透視公式：
　　 scale = fl / (fl + z);
　　 scale是大小的比例值，0.0到1.0之間，fl是觀察點到成像面的距離，通常這個值是固定，z就是物件的三維空間中的z軸。
　　在寫這些代碼之前，我喜歡用面向?qū)ο髞砻枋鑫覍懙倪@些東西，比如我需要一個場景，場景是個空間，空間內(nèi)是可以容納各種物件的，物件是個對象，物件是是x,y,z三個維度的，場景可以插入任意多的物件，物件就會以它的坐標值，顯示在場景的特定位置，由場景來負責物件的顯示位置。
　　一些demo，請使用鼠標移動及滾輪來控制。
效果1

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>偽3d透視效果</title> <style> html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> </head> <body> <div   class="m2z278s"   id="box"> </div> <div   class="vnk2vuz"   id="debug"></div> <script> void function(window){ var document = window.document; var debug = document.getElementById('debug'); function ObjtoStr(obj){ var arr = []; for(var i in obj){ if(isNaN(obj[i])) continue; arr.push(i + ':' + obj[i]); } return arr.join('; '); } function getElementOffset(element){ var left = 0, top = 0; do{ left += element.offsetLeft; top += element.offsetTop; }while(element = element.offsetParent); return { left:left, top:top }; } function getMouseOffset(event){ return { x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft), y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop) }; } function addEventListener(element,type,fun){ if(element.addEventListener){ element.addEventListener(type,function(event){ fun(event); },false); }else{ element.attachEvent('on'+type,function(){ fun(window.event); }); } } function extend(subClass,supClass){ var fun = function(){}, prototype = subClass.prototype; fun.prototype = supClass.prototype; subClass.prototype = new fun(); for(var i in prototype){ subClass.prototype[i] = prototype[i]; } subClass.$supClass = supClass; subClass.prototype.$supClass = function(){ var supClass = arguments.callee.caller.$supClass; if(typeof supClass == 'function'){ supClass.apply(this,arguments); this.$supClass = supClass; } }; subClass.prototype.constructor = subClass; return subClass; } /** * WH類，高寬 */ function WH(w,h){ this.w = w; this.h = h; } WH.prototype = { clone:function(){ return new WH(this.w,this.h); } }; /** * xyz坐標類 * */ function XYZ(x,y,z){ this.x = x; this.y = y; this.z = z; } XYZ.prototype = { clone:function(){ return new XYZ(this.x,this.y,this.z); } }; /** * 場景類 */ function Scene(options){ //屬性 //dom this.element = null; //場景距離 this.fl = 500; this.wh = null; //基準z軸 this.baseZ = 0; //中心消失點坐標 this.cX = 0; this.cY = 0; //中心消失點便宜 this.cXl = 0; this.cYl = 0; //偏移系數(shù) this.ce = 1; this.ThingList = []; this.setOption(options); this.init(); } Scene.prototype = { setOption:function(options){ for(var i in options){ switch(i){ case 'element': this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i]; break; } } }, init:function(){ if(!this.element) throw new Error(90,'not box'); this.wh = new WH(this.element.clientWidth,this.element.clientHeight); this.bindEvent(); }, addThing:function(/* Thing */ thing){ this.ThingList.push(thing); this.calcPosition(thing); this.element.appendChild(thing.getElement(this)); }, //計算位置及大小 calcPosition:function(/*Thing*/ thing){ this.cX = this.element.clientWidth/2; this.cY = this.element.clientHeight/2; scale = this.fl/(this.fl + thing.xyz.z+this.baseZ); if(scale <= 0){ thing.element.style.display = 'none'; return ; }else{ thing.element.style.display = ''; } thing.element.style.width = thing.wh.w * scale + 'px'; thing.element.style.height = thing.wh.h * scale + 'px'; thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; thing.element.style.zIndex = Math.round(scale*1000); if(thing.isOpacity){ thing.element.style.opacity = Math.min(scale*4.5,1); thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; } }, bindEvent:function(){ var self = this; addEventListener(this.element,'mousemove',function(event){ self.onMouseMove(event); }); var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; addEventListener(this.element,mousewheel,function(event){ self.onMouseWheel(event); }); }, //在場景內(nèi)移動事件 onMouseMove:function(event){ //場景的頁面坐標 var po = getElementOffset(this.element); //鼠標光標的頁面坐標 var ev = getMouseOffset(event); //場景內(nèi)坐標 var x = ev.x-po.left; var y = ev.y-po.top; //中間消失點的坐標偏移差 this.cXl = (this.element.clientWidth/2 - x) * this.ce; this.cYl = (this.element.clientHeight/2 - y) * this.ce; this.reDraw(); }, onMouseWheel:function(event){ var code = event.wheelDelta || -event.detail; if(code > 0){ this.baseZ -= 200; }else{ this.baseZ += 200; } this.reDraw(); }, reDraw:function(){ for(var i=0 ; i<this.ThingList.length;i++){ this.calcPosition(this.ThingList[i]); } } }; /** * 物件抽象類 */ function Thing(options){ this.scene = null; this.wh = new WH(10,10); this.xyz = new XYZ(10,10,0); this.element = null; this.isOpacity = true; this.setOption(options); this.init(); } Thing.prototype = { setOption:function(options){ for(var i in options){ switch(i){ case 'wh': case 'xyz': case 'isOpacity': this[i] = options[i]; break; default: break; } } }, init:function(){ this.element = this.draw(); this.element.style.position = 'absolute'; this.element.style.width = this.wh.w + 'px'; this.element.style.height = this.wh.h + 'px'; }, draw:function(){ throw new Error(998,'method do not realize!'); }, getElement:function(/*Scene*/ scene){ this.scene = scene; return this.element; } }; function Diam(options){ this.$supClass(options); } Diam.prototype = { draw:function(){ var img = document.createElement('img'); loadimg = img.cloneNode(true); loadimg.onload = function(){ self.wh = new WH(this.width,this.height); } img.src = [ '/upload/201201/20120105103758227.jpg', '/upload/201201/20120105103801969.jpg', '/upload/201201/20120105103801207.jpg', '/upload/201201/20120105103801956.jpg', '/upload/201201/20120105103801732.jpg', '/upload/201201/20120105103801346.jpg', '/upload/201201/20120105103801362.jpg' ][Math.round(Math.random()*6)]; return img; } }; extend(Diam,Thing); function Sky(options){ this.$supClass(options); } Sky.prototype = { draw:function(){ var img = document.createElement('img'); img.src = [ '/upload/201201/20120105103801314.jpg', '/upload/201201/20120105103803325.jpg', '/upload/201201/20120105103803314.jpg', '/upload/201201/20120105103803146.jpg' ][Math.round(Math.random()*3)]; return img; } }; extend(Sky,Thing); var scene = new Scene({ 'element':'box' }); for(var i= 0 ; i < 50 ;i++){ scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(Math.random() * document.body.clientWidth,Math.random() *document.body.clientHeight,Math.random() *8000) })); } scene.addThing(new Sky({ wh:new WH(160000,120000), xyz:new XYZ(-80000,-60000,54000), isOpacity:false })); }(window); </script></body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

效果2

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>偽3d透視效果</title> <style> html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> </head> <body> <div   class="vzgnugn"   id="box"> </div> <div   class="0lswtfn"   id="debug"></div> <script> void function(window){ var document = window.document; var debug = document.getElementById('debug'); function ObjtoStr(obj){ var arr = []; for(var i in obj){ if(isNaN(obj[i])) continue; arr.push(i + ':' + obj[i]); } return arr.join('; '); } function getElementOffset(element){ var left = 0, top = 0; do{ left += element.offsetLeft; top += element.offsetTop; }while(element = element.offsetParent); return { left:left, top:top }; } function getMouseOffset(event){ return { x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft), y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop) }; } function addEventListener(element,type,fun){ if(element.addEventListener){ element.addEventListener(type,function(event){ fun(event); },false); }else{ element.attachEvent('on'+type,function(){ fun(window.event); }); } } function extend(subClass,supClass){ var fun = function(){}, prototype = subClass.prototype; fun.prototype = supClass.prototype; subClass.prototype = new fun(); for(var i in prototype){ subClass.prototype[i] = prototype[i]; } subClass.$supClass = supClass; subClass.prototype.$supClass = function(){ var supClass = arguments.callee.caller.$supClass; if(typeof supClass == 'function'){ supClass.apply(this,arguments); this.$supClass = supClass; } }; subClass.prototype.constructor = subClass; return subClass; } /** * WH類，高寬 */ function WH(w,h){ this.w = w; this.h = h; } WH.prototype = { clone:function(){ return new WH(this.w,this.h); } }; /** * xyz坐標類 * */ function XYZ(x,y,z){ this.x = x; this.y = y; this.z = z; } XYZ.prototype = { clone:function(){ return new XYZ(this.x,this.y,this.z); } }; /** * 場景類 */ function Scene(options){ //屬性 //dom this.element = null; //場景距離 this.fl = 500; this.wh = null; //基準z軸 this.baseZ = 0; //中心消失點坐標 this.cX = 0; this.cY = 0; //中心消失點便宜 this.cXl = 0; this.cYl = 0; //偏移系數(shù) this.ce = 5; this.ThingList = []; this.setOption(options); this.init(); } Scene.prototype = { setOption:function(options){ for(var i in options){ switch(i){ case 'element': this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i]; break; } } }, init:function(){ if(!this.element) throw new Error(90,'not box'); this.wh = new WH(this.element.clientWidth,this.element.clientHeight); this.bindEvent(); }, addThing:function(/* Thing */ thing){ this.ThingList.push(thing); this.calcPosition(thing); this.element.appendChild(thing.getElement(this)); }, //計算位置及大小 calcPosition:function(/*Thing*/ thing){ this.cX = this.element.clientWidth/2; this.cY = this.element.clientHeight/2; scale = this.fl/(this.fl + thing.xyz.z+this.baseZ); if(scale <= 0){ thing.element.style.display = 'none'; return ; }else{ thing.element.style.display = ''; } thing.element.style.width = thing.wh.w * scale + 'px'; thing.element.style.height = thing.wh.h * scale + 'px'; thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; thing.element.style.zIndex = Math.round(scale*1000); if(thing.isOpacity){ thing.element.style.opacity = Math.min(scale*4.5,1); thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; } }, bindEvent:function(){ var self = this; addEventListener(this.element,'mousemove',function(event){ self.onMouseMove(event); }); var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; addEventListener(this.element,mousewheel,function(event){ self.onMouseWheel(event); }); }, //在場景內(nèi)移動事件 onMouseMove:function(event){ //場景的頁面坐標 var po = getElementOffset(this.element); //鼠標光標的頁面坐標 var ev = getMouseOffset(event); //場景內(nèi)坐標 var x = ev.x-po.left; var y = ev.y-po.top; //中間消失點的坐標偏移差 this.cXl = (this.element.clientWidth/2 - x) * this.ce; this.cYl = (this.element.clientHeight/2 - y) * this.ce; this.reDraw(); }, onMouseWheel:function(event){ var code = event.wheelDelta || -event.detail; if(code > 0){ this.baseZ -= 200; }else{ this.baseZ += 200; } this.reDraw(); }, reDraw:function(){ for(var i=0 ; i<this.ThingList.length;i++){ this.calcPosition(this.ThingList[i]); } } }; /** * 物件抽象類 */ function Thing(options){ this.scene = null; this.wh = new WH(10,10); this.xyz = new XYZ(10,10,0); this.element = null; this.isOpacity = true; this.setOption(options); this.init(); } Thing.prototype = { setOption:function(options){ for(var i in options){ switch(i){ case 'wh': case 'xyz': case 'isOpacity': this[i] = options[i]; break; default: break; } } }, init:function(){ this.element = this.draw(); this.element.style.position = 'absolute'; this.element.style.width = this.wh.w + 'px'; this.element.style.height = this.wh.h + 'px'; }, draw:function(){ throw new Error(998,'method do not realize!'); }, getElement:function(/*Scene*/ scene){ this.scene = scene; return this.element; } }; function Diam(options){ this.$supClass(options); } Diam.prototype = { draw:function(){ var img = document.createElement('img'); loadimg = img.cloneNode(true); loadimg.onload = function(){ self.wh = new WH(this.width,this.height); } img.src = [ '/upload/201201/20120105103758227.jpg', '/upload/201201/20120105103801969.jpg', '/upload/201201/20120105103801207.jpg', '/upload/201201/20120105103801956.jpg', '/upload/201201/20120105103801732.jpg', '/upload/201201/20120105103801346.jpg', '/upload/201201/20120105103801362.jpg' ][Math.round(Math.random()*6)]; return img; } }; extend(Diam,Thing); function Sky(options){ this.$supClass(options); } Sky.prototype = { draw:function(){ var img = document.createElement('img'); img.src = [ '/upload/201201/20120105103801314.jpg', '/upload/201201/20120105103803325.jpg', '/upload/201201/20120105103803314.jpg', '/upload/201201/20120105103803146.jpg' ][Math.round(Math.random()*3)]; return img; } }; extend(Sky,Thing); var scene = new Scene({ 'element':'box' }); for(var i= 0,x,z ; i < 50 ;i++){ x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,y,3000) })); } for(var i= 0,x,z ; i < 50 ;i++){ x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; z = (Math.cos(Math.PI*2*(i/50)) * 1000)+3000; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,document.body.clientHeight/2+200,z) })); } scene.addThing(new Sky({ wh:new WH(160000,120000), xyz:new XYZ(-80000,-60000,54000), isOpacity:false })); }(window); </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

效果3

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>偽3d透視效果</title> <style> html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#fff; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> </head> <body> <div   class="prtv23w"   id="box"> </div> <div   class="begc23j"   id="debug"></div> <script> void function(window){ /** * by Od 2011/12/25 */ var document = window.document; var debug = document.getElementById('debug'); function ObjtoStr(obj){ var arr = []; for(var i in obj){ if(isNaN(obj[i])) continue; arr.push(i + ':' + obj[i]); } return arr.join('; '); } function getElementOffset(element){ var left = 0, top = 0; do{ left += element.offsetLeft; top += element.offsetTop; }while(element = element.offsetParent); return { left:left, top:top }; } function getMouseOffset(event){ return { x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft), y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop) }; } function addEventListener(element,type,fun){ if(element.addEventListener){ element.addEventListener(type,function(event){ fun(event); },false); }else{ element.attachEvent('on'+type,function(){ fun(window.event); }); } } function extend(subClass,supClass){ var fun = function(){}, prototype = subClass.prototype; fun.prototype = supClass.prototype; subClass.prototype = new fun(); for(var i in prototype){ subClass.prototype[i] = prototype[i]; } subClass.$supClass = supClass; subClass.prototype.$supClass = function(){ var supClass = arguments.callee.caller.$supClass; if(typeof supClass == 'function'){ supClass.apply(this,arguments); this.$supClass = supClass; } }; subClass.prototype.constructor = subClass; return subClass; } /** * WH類，高寬 */ function WH(w,h){ this.w = w; this.h = h; } WH.prototype = { clone:function(){ return new WH(this.w,this.h); } }; /** * xyz坐標類 * */ function XYZ(x,y,z){ this.x = x; this.y = y; this.z = z; } XYZ.prototype = { clone:function(){ return new XYZ(this.x,this.y,this.z); } }; /** * 場景類 */ function Scene(options){ //屬性 //dom this.element = null; //場景距離 this.fl = 500; this.wh = null; //基準z軸 this.baseZ = 0; //中心消失點坐標 this.cX = 0; this.cY = 0; //中心消失點便宜 this.cXl = 0; this.cYl = 0; //偏移系數(shù) this.ce = 1; this.ThingList = []; this.setOption(options); this.init(); } Scene.prototype = { setOption:function(options){ for(var i in options){ switch(i){ case 'element': this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i]; break; } } }, init:function(){ if(!this.element) throw new Error(90,'not box'); this.wh = new WH(this.element.clientWidth,this.element.clientHeight); this.bindEvent(); }, addThing:function(/* Thing */ thing){ this.ThingList.push(thing); this.calcPosition(thing); this.element.appendChild(thing.getElement(this)); }, //計算位置及大小 calcPosition:function(/*Thing*/ thing){ this.cX = this.element.clientWidth/2; this.cY = this.element.clientHeight/2; scale = this.fl/(this.fl + thing.xyz.z+this.baseZ); if(scale <= 0){ thing.element.style.display = 'none'; return ; }else{ thing.element.style.display = ''; } thing.element.style.width = thing.wh.w * scale + 'px'; thing.element.style.height = thing.wh.h * scale + 'px'; thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; thing.element.style.zIndex = Math.round(scale*1000); thing.element.style.opacity = Math.min(scale*4.5,1); thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; }, bindEvent:function(){ var self = this; addEventListener(this.element,'mousemove',function(event){ self.onMouseMove(event); }); var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; addEventListener(this.element,mousewheel,function(event){ self.onMouseWheel(event); }); setInterval(function(){ self.onEnterFrame(); },40); }, //在場景內(nèi)移動事件 onMouseMove:function(event){ //場景的頁面坐標 var po = getElementOffset(this.element); //鼠標光標的頁面坐標 var ev = getMouseOffset(event); //場景內(nèi)坐標 var x = ev.x-po.left; var y = ev.y-po.top; //中間消失點的坐標偏移差 this.cXl = (this.element.clientWidth/2 - x) * this.ce; this.cYl = (this.element.clientHeight/2 - y) * this.ce; this.reDraw(); }, onMouseWheel:function(event){ var code = event.wheelDelta || -event.detail; if(code > 0){ this.baseZ -= 200; }else{ this.baseZ += 200; } this.reDraw(); }, onEnterFrame:function(){ var thing; for(var i=0; i<this.ThingList.length;i++){ thing = this.ThingList[i]; if(thing.isstatic) continue; if(thing.xyz.y+1 >this.wh.h){ thing.xyz.y = 0; }else{ thing.xyz.y += 20; } this.calcPosition(thing); } }, reDraw:function(){ for(var i=0 ; i<this.ThingList.length;i++){ this.calcPosition(this.ThingList[i]); } } }; /** * 物件抽象類 */ function Thing(options){ this.scene = null; this.wh = null; this.xyz = new XYZ(10,10,0); this.element = null; this.isstatic = false; this.setOption(options); this.init(); } Thing.prototype = { setOption:function(options){ for(var i in options){ switch(i){ case 'wh': case 'xyz': case 'isstatic': this[i] = options[i]; break; default: break; } } }, init:function(){ this.element = this.draw(); this.element.style.position = 'absolute'; this.element.style.width = this.wh.w + 'px'; this.element.style.height = this.wh.h + 'px'; }, draw:function(){ throw new Error(998,'method do not realize!'); }, getElement:function(/*Scene*/ scene){ this.scene = scene; return this.element; } }; function Snowflake(options){ this.$supClass(options); } Snowflake.prototype = { draw:function(){ var img = document.createElement('img'),self = this; loadimg = img.cloneNode(true); loadimg.onload = function(){ //self.wh = new WH(this.width,this.height); } img.src = loadimg.src = [ '/upload/201201/20120105103804884.gif', '/upload/201201/20120105103804792.gif', '/upload/201201/20120105103804222.gif', '/upload/201201/20120105103804213.gif', '/upload/201201/20120105103804180.gif', '/upload/201201/20120105103804588.gif' ][Math.round(Math.random()*5)]; return img; } }; extend(Snowflake,Thing); var scene = new Scene({ 'element':'box' }); function tree(options){ this.$supClass(options); } tree.prototype = { draw:function(){ var img = document.createElement('img'),self = this; img.src = '/upload/201201/20120105103804497.gif'; return img; } }; extend(tree,Thing); for(var i= 0,x,z ; i < 100 ;i++){ scene.addThing(new Snowflake({ wh:new WH(50,50), xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth),Math.round(Math.random()*document.body.clientHeight),Math.round(Math.random()*6000-1000)) })); } for(var i= 0,x,z ; i < 80 ;i++){ scene.addThing(new tree({ wh:new WH(500,800), isstatic:true, xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth),Math.round(document.body.clientHeight),Math.round(Math.random()*6000-1000)) })); } for(var i= 0,x,z ; i < 80 ;i++){ scene.addThing(new tree({ wh:new WH(500,800), isstatic:true, xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth*20),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+3000)) })); } for(var i= 0,x,z ; i < 80 ;i++){ scene.addThing(new tree({ wh:new WH(500,800), isstatic:true, xyz:new XYZ(Math.round(Math.random()*-document.body.clientWidth*20),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+3000)) })); } for(var i= 0,x,z ; i < 80 ;i++){ scene.addThing(new tree({ wh:new WH(500,800), isstatic:true, xyz:new XYZ(Math.round(Math.random()*-document.body.clientWidth*10),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+1000)) })); } }(window); </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

效果4

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>偽3d透視效果</title> <style> html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> </head> <body> <div   class="8ac2fub"   id="box"> </div> <div   class="cbi7gdf"   id="debug"></div> <script> void function(window){ var document = window.document; var debug = document.getElementById('debug'); function ObjtoStr(obj){ var arr = []; for(var i in obj){ if(isNaN(obj[i])) continue; arr.push(i + ':' + obj[i]); } return arr.join('; '); } function getElementOffset(element){ var left = 0, top = 0; do{ left += element.offsetLeft; top += element.offsetTop; }while(element = element.offsetParent); return { left:left, top:top }; } function getMouseOffset(event){ return { x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft), y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop) }; } function addEventListener(element,type,fun){ if(element.addEventListener){ element.addEventListener(type,function(event){ fun(event); },false); }else{ element.attachEvent('on'+type,function(){ fun(window.event); }); } } function extend(subClass,supClass){ var fun = function(){}, prototype = subClass.prototype; fun.prototype = supClass.prototype; subClass.prototype = new fun(); for(var i in prototype){ subClass.prototype[i] = prototype[i]; } subClass.$supClass = supClass; subClass.prototype.$supClass = function(){ var supClass = arguments.callee.caller.$supClass; if(typeof supClass == 'function'){ supClass.apply(this,arguments); this.$supClass = supClass; } }; subClass.prototype.constructor = subClass; return subClass; } /** * WH類，高寬 */ function WH(w,h){ this.w = w; this.h = h; } WH.prototype = { clone:function(){ return new WH(this.w,this.h); } }; /** * xyz坐標類 * */ function XYZ(x,y,z){ this.x = x; this.y = y; this.z = z; } XYZ.prototype = { clone:function(){ return new XYZ(this.x,this.y,this.z); } }; /** * 場景類 */ function Scene(options){ //屬性 //dom this.element = null; //場景距離 this.fl = 500; this.wh = null; //基準z軸 this.baseZ = 0; //中心消失點坐標 this.cX = 0; this.cY = 0; //中心消失點便宜 this.cXl = 0; this.cYl = 0; //偏移系數(shù) this.ce = 9; this.ThingList = []; this.setOption(options); this.init(); } Scene.prototype = { setOption:function(options){ for(var i in options){ switch(i){ case 'element': this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i]; break; } } }, init:function(){ if(!this.element) throw new Error(90,'not box'); this.wh = new WH(this.element.clientWidth,this.element.clientHeight); this.bindEvent(); }, addThing:function(/* Thing */ thing){ this.ThingList.push(thing); this.calcPosition(thing); this.element.appendChild(thing.getElement(this)); }, //計算位置及大小 calcPosition:function(/*Thing*/ thing){ this.cX = this.element.clientWidth/2; this.cY = this.element.clientHeight/2; scale = this.fl/(this.fl + thing.xyz.z+this.baseZ); if(scale <= 0){ thing.element.style.display = 'none'; return ; }else{ thing.element.style.display = ''; } thing.element.style.width = thing.wh.w * scale + 'px'; thing.element.style.height = thing.wh.h * scale + 'px'; thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; thing.element.style.zIndex = Math.round(scale*1000); if(thing.isOpacity){ thing.element.style.opacity = Math.min(scale*4.5,1); thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; } }, bindEvent:function(){ var self = this; addEventListener(this.element,'mousemove',function(event){ self.onMouseMove(event); }); var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; addEventListener(this.element,mousewheel,function(event){ self.onMouseWheel(event); }); }, //在場景內(nèi)移動事件 onMouseMove:function(event){ //場景的頁面坐標 var po = getElementOffset(this.element); //鼠標光標的頁面坐標 var ev = getMouseOffset(event); //場景內(nèi)坐標 var x = ev.x-po.left; var y = ev.y-po.top; //中間消失點的坐標偏移差 this.cXl = (this.element.clientWidth/2 - x) * this.ce; this.cYl = (this.element.clientHeight/2 - y) * this.ce; this.reDraw(); }, onMouseWheel:function(event){ var code = event.wheelDelta || -event.detail; if(code > 0){ this.baseZ -= 200; }else{ this.baseZ += 200; } this.reDraw(); }, reDraw:function(){ for(var i=0 ; i<this.ThingList.length;i++){ this.calcPosition(this.ThingList[i]); } } }; /** * 物件抽象類 */ function Thing(options){ this.scene = null; this.wh = new WH(10,10); this.xyz = new XYZ(10,10,0); this.element = null; this.isstats = false; this.isOpacity = true; this.setOption(options); this.init(); } Thing.prototype = { setOption:function(options){ for(var i in options){ switch(i){ case 'wh': case 'xyz': case 'isOpacity': this[i] = options[i]; break; default: break; } } }, init:function(){ this.element = this.draw(); this.element.style.position = 'absolute'; this.element.style.width = this.wh.w + 'px'; this.element.style.height = this.wh.h + 'px'; }, draw:function(){ throw new Error(998,'method do not realize!'); }, getElement:function(/*Scene*/ scene){ this.scene = scene; return this.element; } }; function Diam(options){ this.$supClass(options); } Diam.prototype = { draw:function(){ var img = document.createElement('img'); loadimg = img.cloneNode(true); loadimg.onload = function(){ self.wh = new WH(this.width,this.height); } img.src = [ '/upload/201201/20120105103758227.jpg', '/upload/201201/20120105103801969.jpg', '/upload/201201/20120105103801207.jpg', '/upload/201201/20120105103801956.jpg', '/upload/201201/20120105103801732.jpg', '/upload/201201/20120105103801346.jpg', '/upload/201201/20120105103801362.jpg' ][Math.round(Math.random()*6)]; return img; } }; extend(Diam,Thing); function Sky(options){ this.$supClass(options); } Sky.prototype = { draw:function(){ var img = document.createElement('img'); img.src = [ '/upload/201201/20120105103801314.jpg', '/upload/201201/20120105103803325.jpg', '/upload/201201/20120105103803314.jpg', '/upload/201201/20120105103803146.jpg' ][Math.round(Math.random()*3)]; return img; } }; extend(Sky,Thing); var scene = new Scene({ 'element':'box' }); for(var i= 20,x,z ; i < 40 ;i++){ x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,y,3000) })); } for(var i=11,x,z ; i < 31 ;i++){ x = (Math.sin(Math.PI*2*(i/50)) * 1000)+1680; y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,y,3000) })); } for(var i=9,x,z ; i < 40 ;i++){ x = i*50 -890; y = i*60 + 200; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,y,3000) })); } for(var i=9,x,z ; i < 40 ;i++){ x = i*-50 +3090; y = i*60 + 200; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,y,3000) })); } for(var i= 20,x,z ; i < 40 ;i++){ x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,y,5000) })); } for(var i=11,x,z ; i < 31 ;i++){ x = (Math.sin(Math.PI*2*(i/50)) * 1000)+1680; y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,y,5000) })); } for(var i=9,x,z ; i < 40 ;i++){ x = i*50 -890; y = i*60 + 200; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,y,5000) })); } for(var i=9,x,z ; i < 40 ;i++){ x = i*-50 +3090; y = i*60 + 200; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,y,5000) })); } scene.addThing(new Sky({ wh:new WH(160000,120000), xyz:new XYZ(-80000,-60000,54000), isOpacity:false })); /* for(var i= 0,x,z ; i < 50 ;i++){ x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; z = (Math.cos(Math.PI*2*(i/50)) * 1000)+3000; scene.addThing(new Diam({ wh:new WH(100,100), xyz:new XYZ(x,document.body.clientHeight/2+200,z) })); }*/ }(window); </script></body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

3D場景

僅IE不支持setTimeout/setInterval函數(shù)的第三個以上參數(shù)
setTimeout/setInterval，這兩個函數(shù)相信前端開發(fā)同學都很熟悉。它們在非IE(6-9)瀏覽器中還可以如下使用
2011-05-05
Javascript獲取CSS偽元素屬性的實現(xiàn)代碼
這篇文章主要介紹了Javascript獲取CSS偽元素屬性的實現(xiàn)代碼,需要的朋友可以參考下
2014-09-09
TypeScript新特性之using關鍵字的使用方法
TypeScript 5.2版本中新添加了using關鍵字,目前該關鍵字的提案也進入了ECMAScript的Stage 3,也就是說很快就會進入JavaScript語言本身中,using和const, let和var一樣都是用于變量聲明的,那么它到底有什么與眾不同的地方呢,本文給大家介紹的非常詳細
2023-11-11
javascript制作照片墻及制作過程中出現(xiàn)的問題
這篇文章主要介紹了javascript制作照片墻及制作過程中出現(xiàn)的問題，感興趣的朋友可以參考一下
2016-04-04
JS 屏蔽鍵盤不可用與鼠標右鍵不可用的方法
這篇文章主要介紹了JS 屏蔽鍵盤不可用與鼠標右鍵不可用的方法，有需要的朋友可以參考一下
2013-11-11
Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊列詳解
要了解JavaScript數(shù)組的堆棧和隊列方法的操作,需要先對堆棧和隊列基礎知識有所了解,下面這篇文章主要給大家介紹了關于Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊列的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-05-05
js實現(xiàn)拖拽元素選擇和刪除
這篇文章主要為大家詳細介紹了js實現(xiàn)拖拽元素選擇和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
使用CSS+JavaScript或純js實現(xiàn)半透明遮罩效果的實例分享
這篇文章主要介紹了使用CSS+JavaScript或純js實現(xiàn)半透明遮罩效果的實例分享,編寫半透明遮罩層時要注意定位問題、不要滿屏遮罩,需要的朋友可以參考下
2016-05-05
Typescript 實現(xiàn)函數(shù)重載的方式
函數(shù)重載簡單點說就是,同一個函數(shù)的不同實現(xiàn)方式,根據(jù)傳入的參數(shù)的類型或者長度,決定最終調(diào)用哪一個實現(xiàn),本文給大家介紹了Typescript 實現(xiàn)函數(shù)重載的方式,需要的朋友可以參考下
2024-05-05
原生js獲取寬高與jquery獲取寬高的方法關系對比
這篇文章主要介紹了原生js獲取寬高與jquery獲取寬高的方法關系對比,需要的朋友可以參考下
2014-04-04