您当前位置：首页 > web前端 > jscript > JavaScript模拟3D场景、三维空间的几个效果

JavaScript模拟3D场景、三维空间的几个效果

来源：程序员人生发布时间：2014-05-05 16:39:09 阅读次数：3966次

这几个demo上星期平安夜做的，感觉效果不错，就放在出来，分享给大家。

要在二维空间模拟出三维的效果，就需要把三维的坐标转换成二维坐标。一个最基本依据是：东西越远，看到大小就越小，坐标越往消失点靠拢。

透视公式：

scale = fl / (fl + z);

scale是大小的比例值，0.0到1.0之间，fl是观察点到成像面的距离，通常这个值是固定，z就是物件的三维空间中的z轴。

在写这些代码之前，我喜欢用面向对象来描述我写的这些东西，比如我需要一个场景，场景是个空间，空间内是可以容纳各种物件的，物件是个对象，物件是是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;}#VeryHuo{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}</style></head><body><div id="box"></div><div id="VeryHuo"></div><script>void function(window){var document = window.document;var VeryHuo = document.getElementById('VeryHuo');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){//属性//domthis.element = null;//场景距离this.fl = 500;this.wh = null;//基准z轴this.baseZ = 0;//中心消失点坐标this.cX = 0;this.cY = 0;//中心消失点便宜this.cXl = 0;this.cYl = 0;//偏移系数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);});},//在场景内移动事件onMouseMove:function(event){//场景的页面坐标var po = getElementOffset(this.element);//鼠标光标的页面坐标var ev = getMouseOffset(event);//场景内坐标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 = ['/uploads/allimg/1112/p16i7nbc3s3bt1dt3naj1p3r1u2e7.jpg','/uploads/allimg/1112/p16i7nbc3sverp2e1j9l8rddbv6.jpg','/uploads/allimg/1112/p16i7nbc3sr3a15f2hd6trl1v632.jpg','/uploads/allimg/1112/p16i7nbc3s4e02mb3j01susuve5.jpg','/uploads/allimg/1112/p16i7nbc3sq8lo6puh5su1m4d4.jpg','/uploads/allimg/1112/p16i7nbc3s15nd1nrf1r8018un7jv3.jpg','/uploads/allimg/1112/p16i7nbc3r2frhoe13gr1k6c11tp1.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 = ['/uploads/allimg/1112/p16i7ncbsv12991dii1fjbif4esn4.jpg','/uploads/allimg/1112/p16i7ncbsv1652hgn13us1ob410423.jpg','/uploads/allimg/1112/p16i7ncbsv15i55d0meuru3obr2.jpg','/uploads/allimg/1112/p16i7ncbsvq3o143n1gdamcn13i21.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>
提示：可修改后代码再运行!

效果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;}#VeryHuo{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}</style></head><body><div id="box"></div><div id="VeryHuo"></div><script>void function(window){var document = window.document;var VeryHuo = document.getElementById('VeryHuo');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){//属性//domthis.element = null;//场景距离this.fl = 500;this.wh = null;//基准z轴this.baseZ = 0;//中心消失点坐标this.cX = 0;this.cY = 0;//中心消失点便宜this.cXl = 0;this.cYl = 0;//偏移系数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);});},//在场景内移动事件onMouseMove:function(event){//场景的页面坐标var po = getElementOffset(this.element);//鼠标光标的页面坐标var ev = getMouseOffset(event);//场景内坐标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 = ['/uploads/allimg/1112/p16i7nbc3s3bt1dt3naj1p3r1u2e7.jpg','/uploads/allimg/1112/p16i7nbc3sverp2e1j9l8rddbv6.jpg','/uploads/allimg/1112/p16i7nbc3sr3a15f2hd6trl1v632.jpg','/uploads/allimg/1112/p16i7nbc3s4e02mb3j01susuve5.jpg','/uploads/allimg/1112/p16i7nbc3sq8lo6puh5su1m4d4.jpg','/uploads/allimg/1112/p16i7nbc3s15nd1nrf1r8018un7jv3.jpg','/uploads/allimg/1112/p16i7nbc3r2frhoe13gr1k6c11tp1.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 = ['/uploads/allimg/1112/p16i7ncbsv12991dii1fjbif4esn4.jpg','/uploads/allimg/1112/p16i7ncbsv1652hgn13us1ob410423.jpg','/uploads/allimg/1112/p16i7ncbsv15i55d0meuru3obr2.jpg','/uploads/allimg/1112/p16i7ncbsvq3o143n1gdamcn13i21.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>
提示：可修改后代码再运行!

效果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;}#VeryHuo{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}</style></head><body><div id="box"></div><div id="VeryHuo"></div><script>void function(window){/*** by Od 2011/12/25*/var document = window.document;var VeryHuo = document.getElementById('VeryHuo');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){//属性//domthis.element = null;//场景距离this.fl = 500;this.wh = null;//基准z轴this.baseZ = 0;//中心消失点坐标this.cX = 0;this.cY = 0;//中心消失点便宜this.cXl = 0;this.cYl = 0;//偏移系数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);},//在场景内移动事件onMouseMove:function(event){//场景的页面坐标var po = getElementOffset(this.element);//鼠标光标的页面坐标var ev = getMouseOffset(event);//场景内坐标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 = ['/uploads/allimg/1112/p16i7nf1high41bbodrb18aboor8.gif','/uploads/allimg/1112/p16i7nf1hiaeu6am10m7192a4pj7.gif','/uploads/allimg/1112/p16i7nf1hi1te5gdb12p0mhp12lc6.gif','/uploads/allimg/1112/p16i7nf1hi1fa51km41ofeh1219p25.gif','/uploads/allimg/1112/p16i7nf1hiugi18uj1g5t1la4bd84.gif','/uploads/allimg/1112/p16i7nf1hi13fb1mjstfgo11pel3.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 = '/uploads/allimg/1112/p16i7nf1hijv3rtcqab1mbjr0g9.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>
提示：可修改后代码再运行!

效果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;}#VeryHuo{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}</style></head><body><div id="box"></div><div id="VeryHuo"></div><script>void function(window){var document = window.document;var VeryHuo = document.getElementById('VeryHuo');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){//属性//domthis.element = null;//场景距离this.fl = 500;this.wh = null;//基准z轴this.baseZ = 0;//中心消失点坐标this.cX = 0;this.cY = 0;//中心消失点便宜this.cXl = 0;this.cYl = 0;//偏移系数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);});},//在场景内移动事件onMouseMove:function(event){//场景的页面坐标var po = getElementOffset(this.element);//鼠标光标的页面坐标var ev = getMouseOffset(event);//场景内坐标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 = ['/uploads/allimg/1112/p16i7nbc3s3bt1dt3naj1p3r1u2e7.jpg','/uploads/allimg/1112/p16i7nbc3sverp2e1j9l8rddbv6.jpg','/uploads/allimg/1112/p16i7nbc3sr3a15f2hd6trl1v632.jpg','/uploads/allimg/1112/p16i7nbc3s4e02mb3j01susuve5.jpg','/uploads/allimg/1112/p16i7nbc3sq8lo6puh5su1m4d4.jpg','/uploads/allimg/1112/p16i7nbc3s15nd1nrf1r8018un7jv3.jpg','/uploads/allimg/1112/p16i7nbc3r2frhoe13gr1k6c11tp1.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 = ['/uploads/allimg/1112/p16i7ncbsv12991dii1fjbif4esn4.jpg','/uploads/allimg/1112/p16i7ncbsv1652hgn13us1ob410423.jpg','/uploads/allimg/1112/p16i7ncbsv15i55d0meuru3obr2.jpg','/uploads/allimg/1112/p16i7ncbsvq3o143n1gdamcn13i21.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>
提示：可修改后代码再运行!

本文来源：博客园　作者：OD BLOG

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 jQuery学习――入门篇（附实例代码）

下一篇 谈谈新手该如何做点击网赚

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点