To simulate three-dimensional effect in two-dimensional space, we need to convert three-dimensional coordinates into two-dimensional coordinates. A most basic basis is: the farther the thing, see the smaller the size, the more the coordinates to vanishing point closer.
Perspective formula:
Scale = FL/(fl + z);
Scale is the proportional value of the size, between 0.0 and 1.0, FL is the distance from the observation point to the imaging plane, usually the value is fixed and z is the z axis of the object's three-dimensional space.
Before writing this code, I like to use object-oriented to describe the things I write, for example, I need a scene, the scene is a space, the space is able to accommodate a variety of objects, objects is an object, objects are x,y,z three dimensions, the scene can be inserted any number of objects, the object will be its coordinates value, Displayed at a specific location in the scene, the scene is responsible for where the object is displayed.
Some demo, please use mouse movement and scroll wheel to control.
Effect 1
<!doctype html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title> pseudo 3d Perspective effect </title> <style> html,body{padding:0px; margin:0px ; Width:100%;overflow:hidden;} #box {background: #ccc; height:100%; border:1px solid #ccc;p osition:relative; overflow:hidden;} #debug {width:200px; background: #fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> </head> <body> <div id= "box" > </div> <div id= "Debug" ></div> <s cript> 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.C Lientleft), 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 class, High width/function WH (w,h) {THIS.W = W; This.h = h; } Wh.prototype = {clone:function () {return new WH (THIS.W,THIS.H); } }; /** * XYZ Coordinate class */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); } }; /** * Scene class */function Scene (options) {//attribute//dom this.element = null; Scene distance this.fl = 500; THIS.WH = null; Datum z-Axis this.basez = 0; Center vanishing Point Coordinate this.cx = 0; this.cy = 0; Center vanishing point cheap THIS.CXL = 0; this.cyl = 0; Offset coefficient this.ce = 1; This. Thinglist = []; This.setoption (options); This.init (); } Scene.prototype = {setoption:function (options) {for (var i, options) {switch (i) {case ' element ': this[i] = Typeo F Options[i] = = ' String '? document.getElementById (Options[i]): Options[i]; Break }}, Init:function () {if (!this.element) throw new Error (' 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)); }, calculate position and size 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) {//Scene's page coordinates var PO = getelementoffset (this.element) in the scene Mouse cursor's page coordinates var EV = Getmouseoffset (event); In-scene coordinates var x = ev.x-po.left; var y = ev.y-po.top; The coordinate deviation of the intermediate vanishing point 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]); } } }; /** * Object abstract class */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 ' I Sopacity ': 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 does 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 < 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 All SELECT Note: If the need to introduce external JS need to refresh to perform]
Effect 2
<!doctype html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title> pseudo 3d Perspective effect </title> <style> html,body{padding:0px; margin:0px ; Width:100%;overflow:hidden;} #box {background: #ccc; height:100%; border:1px solid #ccc;p osition:relative; overflow:hidden;} #debug {width:200px; background: #fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> </head> <body> <div id= "box" > </div> <div id= "Debug" ></div> <s cript> 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.C Lientleft), 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 class, High width/function WH (w,h) {THIS.W = W; This.h = h; } Wh.prototype = {clone:function () {return new WH (THIS.W,THIS.H); } }; /** * XYZ Coordinate class */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); } }; /** * Scene class */function Scene (options) {//attribute//dom this.element = null; Scene distance this.fl = 500; THIS.WH = null; Datum z-Axis this.basez = 0; Center vanishing Point Coordinate this.cx = 0; this.cy = 0; Center vanishing point cheap THIS.CXL = 0; this.cyl = 0; Offset coefficient this.ce = 5; This. Thinglist = []; This.setoption (options); This.init (); } Scene.prototype = {setoption:function (options) {for (var i, options) {switch (i) {case ' element ': this[i] = Typeo F Options[i] = = ' String '? document.getElementById (Options[i]): Options[i]; Break }}, Init:function () {if (!this.element) throw new Error (' 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)); }, calculate position and size 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) {//Scene's page coordinates var PO = getelementoffset (this.element) in the scene Mouse cursor's page coordinates var EV = Getmouseoffset (event); In-scene coordinates var x = ev.x-po.left; var y = ev.y-po.top; The coordinate deviation of the intermediate vanishing point 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]); } } }; /** * Object abstract class */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 ' I Sopacity ': 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 does 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 < 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 < 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 All SELECT Note: If the need to introduce external JS need to refresh to perform]
Effect 3
<!doctype html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title> pseudo 3d Perspective effect </title> <style> html,body{padding:0px; margin:0px ; Width:100%;overflow:hidden;} #box {background: #fff; height:100%; border:1px solid #ccc;p osition:relative; overflow:hidden;} #debug {width:200px; background: #fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> </head> <body> <div id= "box" > </div> <div id= "Debug" ></div> <s cript> 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.C Lientleft), 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 class, High width/function WH (w,h) {THIS.W = W; This.h = h; } Wh.prototype = {clone:function () {return new WH (THIS.W,THIS.H); } }; /** * XYZ Coordinate class */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); } }; /** * Scene class */function Scene (options) {//attribute//dom this.element = null; Scene distance this.fl = 500; THIS.WH = null; Datum z-Axis this.basez = 0; Center vanishing Point Coordinate this.cx = 0; this.cy = 0; Center vanishing point cheap THIS.CXL = 0; this.cyl = 0; Offset coefficient this.ce = 1; This. Thinglist = []; This.setoption (options); This.init (); } Scene.prototype = {setoption:function (options) {for (var i, options) {switch (i) {case ' element ': this[i] = Typeo F Options[i] = = ' String '? document.getElementById (Options[i]): Options[i]; Break }}, Init:function () {if (!this.element) throw new Error (' 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)); }, calculate position and size 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) {//Scene's page coordinates var PO = getelementoffset (this.element) in the scene Mouse cursor's page coordinates var EV = Getmouseoffset (event); In-scene coordinates var x = ev.x-po.left; var y = ev.y-po.top; The coordinate deviation of the intermediate vanishing point 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]); } } }; /** * Object abstract class */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 ' I Sstatic ': 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 does 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/2 01201/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 < 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 < i++) {scene.addthing (new tree ({wh:new wh (500,800), Isstatic:true, Xyz:new xyz (MATH.R Ound (Math.random () *document.body.clientwidth), Math.Round (Document.body.clientHeight), Math.Round (Math.random () * 6000-1000))); for (Var i= 0,x,z i < i++) {scene.addthing (new tree ({wh:new wh (500,800), Isstatic:true, Xyz:new xyz (MATH.R Ound (Math.random () *document.body.clientwidth*20), Math.Round (Document.body.clientHeight), Math.Round (math.random () *4000+3000))); for (Var i= 0,x,z i < i++) {scene.addthing (new tree ({wh:new wh (500,800), Isstatic:true, Xyz:new xyz (MATH.R Ound (Math.random () *-document.body.clientwidth*20), Math.Round (Document.body.clientHeight), Math.Round ( Math.random () *4000+3000))); for (Var i= 0,x,z i < 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 All SELECT Note: If the need to introduce external JS need to refresh to perform]
Effect 4
<!doctype html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title> pseudo 3d Perspective effect </title> <style> html,body{padding:0px; margin:0px ; Width:100%;overflow:hidden;} #box {background: #ccc; height:100%; border:1px solid #ccc;p osition:relative; overflow:hidden;} #debug {width:200px; background: #fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> </head> <body> <div id= "box" > </div> <div id= "Debug" ></div> <s cript> 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.C Lientleft), 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 class, High width/function WH (w,h) {THIS.W = W; This.h = h; } Wh.prototype = {clone:function () {return new WH (THIS.W,THIS.H); } }; /** * XYZ Coordinate class */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); } }; /** * Scene class */function Scene (options) {//attribute//dom this.element = null; Scene distance this.fl = 500; THIS.WH = null; Datum z-Axis this.basez = 0; Center vanishing Point Coordinate this.cx = 0; this.cy = 0; Center vanishing point cheap THIS.CXL = 0; this.cyl = 0; Offset coefficient this.ce = 9; This. Thinglist = []; This.setoption (options); This.init (); } Scene.prototype = {setoption:function (options) {for (var i, options) {switch (i) {case ' element ': this[i] = Typeo F Options[i] = = ' String '? document.getElementById (Options[i]): Options[i]; Break }}, Init:function () {if (!this.element) throw new Error (' 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)); }, calculate position and size 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) {//Scene's page coordinates var PO = getelementoffset (this.element) in the scene Mouse cursor's page coordinates var EV = Getmouseoffset (event); In-scene coordinates var x = ev.x-po.left; var y = ev.y-po.top; The coordinate deviation of the intermediate vanishing point 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]); } } }; /** * Object abstract class */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 ' I Sopacity ': 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 does 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 < 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 < 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 < 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 < 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 < 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 < 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 < i++) {x = i*50-890; y = i*60 + 200; Scene.addthing (New Diam ({wh:new WH (100,1), Xyz:new xyz (x,y,5000)}); for (Var i=9,x,z i < 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 < 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 All SELECT Note: If the need to introduce external JS need to refresh to perform]
