JS偽3D 圖形透視效果

最後更新：2013-11-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本來是想實現多個圓片的透視效果，對於運算都是測試得出的。不是嚴謹的數學計算。

使用簡單的div布局，css設定的一些形式

有舞台深度stageDeep，圓片深度距離zDistance，和修正角度p可以設定調節映像的整體顯示效果。

圖形隨滑鼠運動而運動。

Google Chrom下表現最好。不支援FF

下面代碼：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> body{ height:500px; }  .ineed{width:40px; position:absolute; left:10px;border:1px #666 solid; height:40px; border-radius:20px; margin:5px; background:#EEE; float:left;} .cross{border:1px #666 solid;position:absolute; }  </style> </head> <body>   </body>  <script type="text/javascript" > //author EI Nino //E-Mail : Jinyachen@gmail.com //copyright 2013 function randColor(){     var v=[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E"];     return "#"+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]; } function debug(){     if(arguments.length==0)     return;     var d;     var p = document.createElement("p");     var pp;     for(var i in arguments){         var a = document.createElement("a");         a.style.margin="4px";         a.style.fontFamily="Arial";         a.style.color=randColor();         a.innerHTML = i+"@"+arguments[i];         p.appendChild(a);     }     if(!(d=document.getElementById("DEBUG")))     {         d = document.createElement("div");         d.setAttribute("id","DEBUG");         d.style.width="500px";         d.style.height="300px";         d.style.background="#EFE";         d.style.position="fixed";         d.style.right="0";         d.style.top="0";         d.style.overflow="scroll";         var h2 = document.createElement("h2");         h2.innerHTML="DEBUG";         h2.style.color="#AAA";         h2.style.fontFamily="Arial";         d.appendChild(h2);         document.getElementsByTagName("body")[0].appendChild(d);     }     if(!(pp=document.getElementById("debug_p")))     {         d.appendChild(p);     }     else{         d.insertBefore(p,pp);         pp.setAttribute("id","");     }     p.setAttribute("id","debug_p");           }  function AngletoPI(a){     return a/180*Math.PI; } function PItoAngle(p){     return p/Math.PI*180; } function AngletoLength(p,z){     return Math.tan(p)*z; }  function Length(x,y,z){     return Math.sqrt(Math.pow(x,2)+Math.pow(y,2)+Math.pow(z,3)); }   //cross function setCross(){     for(var i=1; i<60; i++)//Y     {         var div =document.createElement("div");         div.innerHTML="";         div.className ="cross";         div.style.width="2px";         div.style.height="2px";         div.style.borderRadius =  "2px";         div.style.borderColor="#F00";         div.style.zIndex=-200;         var width = div.style.width.substring(0,div.style.width.indexOf("px"));         var height = div.style.height.substring(0,div.style.height.indexOf("px"));          div.style.left=String(clientX/2-width/2)+"px";         div.style.top =String(i*10)+"px";         document.getElementsByTagName("body")[0].appendChild(div);     }     for(var i=1; i<100; i++)//X     {         var div =document.createElement("div");         div.innerHTML="";         div.className ="cross";         div.style.width="2px";         div.style.height="2px";         div.style.borderRadius =  "2px";         div.style.borderColor="#0F0";         div.style.zIndex=-100;         var width = div.style.width.substring(0,div.style.width.indexOf("px"));         var height = div.style.height.substring(0,div.style.height.indexOf("px"));         div.style.left=String(i*10)+"px";         div.style.top =String(clientY/2-height/2)+"px";         document.getElementsByTagName("body")[0].appendChild(div);     }     /*for(var i=1; i<90; i++)//Z     {         var div =document.createElement("div");         div.innerHTML="";         div.className ="cross";         div.style.width="2px";         div.style.height="2px";         div.style.borderRadius =  "2px";         div.style.borderColor="#00F";         div.style.zIndex=5;         var width = div.style.width.substring(0,div.style.width.indexOf("px"));         var height = div.style.height.substring(0,div.style.height.indexOf("px"));         div.style.left=String(clientX-i*10)+"px";         div.style.top =String(i*5)+"px";         document.getElementsByTagName("body")[0].appendChild(div);     }*/ } //cross end       function DrowDiv(width,height,zIndex,vertical,horizon,deep,obj){      var div =document.createElement("div");     div.innerHTML="";     div.className ="ineed";     width = width-AngletoLength(p,zIndex);     height = height-AngletoLength(p,zIndex);     if(width<0)     {         return;     }     div.style.width=width+"px";     div.style.height=height+"px";     div.style.borderRadius = String(width/2)+"px";     div.style.opacity = 0.6;     div.style.background="#DDD";//randColor();     div.style.zIndex=-zIndex;     div.setAttribute("x",width);     div.setAttribute("y",height);     div.setAttribute("z",div.style.zIndex);     div.style.left=String(clientX/2-width/2-horizon/deep*zIndex)+"px";     div.style.top =String(clientY/2-height/2-vertical/deep*zIndex)+"px";          obj.appendChild(div); } function Drow3D(v,h,deep){     if(arguments.length<3)         deep = stageDeep;     var obj =document.getElementById("circle_3D");     obj.innerHTML="";     for(var i=1; i<10; i++)     {         DrowDiv(150,150,i*zDistance,v,h,deep,obj);     }     debug(v,h); }  function Drow3DByMouse(v,h,deep){     if(arguments.length<3)         deep = stageDeep;     h=event.pageX-(clientX/2);     v=event.pageY-(clientY/2);     var obj =document.getElementById("circle_3D");     obj.innerHTML="";     for(var i=1; i<10; i++)     {         DrowDiv(150,150,i*zDistance,v,h,deep,obj);     }     debug("y="+v,"x="+h); } function createStage(){     var c = document.createElement("div");     c.setAttribute("id","circle_3D");     document.getElementsByTagName("body")[0].appendChild(c);     stage = document.getElementById("circle_3D");     stage.style.width="1000px";     stage.style.height="500px";     stage.style.border="1px solid #666";     stage.style.overflow="hidden";     stage.style.cursor="crosshair";  } var stage; createStage(); var clientX = stage.style.width.substring(0,stage.style.width.indexOf("px")); var clientY = stage.style.height.substring(0,stage.style.height.indexOf("px")); setCross(); var stageDeep=100;//舞台深度 var zDistance = 40;//物體間的距離 var p = AngletoPI(20);//角度 //Drow3D(-10,50); document.addEventListener("mousemove",Drow3DByMouse);     </script> </html> <!DOCTYPE html><html><head><meta charset="utf-8" /><style type="text/css">body{ height:500px; }.ineed{width:40px; position:absolute; left:10px;border:1px #666 solid; height:40px; border-radius:20px; margin:5px; background:#EEE; float:left;}.cross{border:1px #666 solid;position:absolute; }</style></head><body></body><script type="text/javascript" >//author EI Nino//E-Mail : Jinyachen@gmail.com//copyright 2013function randColor(){ var v=[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E"]; return "#"+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)];}function debug(){ if(arguments.length==0) return; var d; var p = document.createElement("p"); var pp; for(var i in arguments){  var a = document.createElement("a");  a.style.margin="4px";  a.style.fontFamily="Arial";  a.style.color=randColor();  a.innerHTML = i+"@"+arguments[i];  p.appendChild(a); } if(!(d=document.getElementById("DEBUG"))) {  d = document.createElement("div");  d.setAttribute("id","DEBUG");  d.style.width="500px";  d.style.height="300px";  d.style.background="#EFE";  d.style.position="fixed";  d.style.right="0";  d.style.top="0";  d.style.overflow="scroll";  var h2 = document.createElement("h2");  h2.innerHTML="DEBUG";  h2.style.color="#AAA";  h2.style.fontFamily="Arial";  d.appendChild(h2);  document.getElementsByTagName("body")[0].appendChild(d); } if(!(pp=document.getElementById("debug_p"))) {  d.appendChild(p); } else{  d.insertBefore(p,pp);  pp.setAttribute("id",""); } p.setAttribute("id","debug_p");  }function AngletoPI(a){ return a/180*Math.PI;}function PItoAngle(p){ return p/Math.PI*180;}function AngletoLength(p,z){ return Math.tan(p)*z;}function Length(x,y,z){ return Math.sqrt(Math.pow(x,2)+Math.pow(y,2)+Math.pow(z,3));}//crossfunction setCross(){ for(var i=1; i<60; i++)//Y {  var div =document.createElement("div");  div.innerHTML="";  div.className ="cross";  div.style.width="2px";  div.style.height="2px";  div.style.borderRadius =  "2px";  div.style.borderColor="#F00";  div.style.zIndex=-200;  var width = div.style.width.substring(0,div.style.width.indexOf("px"));  var height = div.style.height.substring(0,div.style.height.indexOf("px"));  div.style.left=String(clientX/2-width/2)+"px";  div.style.top =String(i*10)+"px";  document.getElementsByTagName("body")[0].appendChild(div); } for(var i=1; i<100; i++)//X {  var div =document.createElement("div");  div.innerHTML="";  div.className ="cross";  div.style.width="2px";  div.style.height="2px";  div.style.borderRadius =  "2px";  div.style.borderColor="#0F0";  div.style.zIndex=-100;  var width = div.style.width.substring(0,div.style.width.indexOf("px"));  var height = div.style.height.substring(0,div.style.height.indexOf("px"));  div.style.left=String(i*10)+"px";  div.style.top =String(clientY/2-height/2)+"px";  document.getElementsByTagName("body")[0].appendChild(div); } /*for(var i=1; i<90; i++)//Z {  var div =document.createElement("div");  div.innerHTML="";  div.className ="cross";  div.style.width="2px";  div.style.height="2px";  div.style.borderRadius =  "2px";  div.style.borderColor="#00F";  div.style.zIndex=5;  var width = div.style.width.substring(0,div.style.width.indexOf("px"));  var height = div.style.height.substring(0,div.style.height.indexOf("px"));  div.style.left=String(clientX-i*10)+"px";  div.style.top =String(i*5)+"px";  document.getElementsByTagName("body")[0].appendChild(div); }*/}//cross end  function DrowDiv(width,height,zIndex,vertical,horizon,deep,obj){ var div =document.createElement("div"); div.innerHTML=""; div.className ="ineed"; width = width-AngletoLength(p,zIndex); height = height-AngletoLength(p,zIndex); if(width<0) {  return; } div.style.width=width+"px"; div.style.height=height+"px"; div.style.borderRadius = String(width/2)+"px"; div.style.opacity = 0.6; div.style.background="#DDD";//randColor(); div.style.zIndex=-zIndex; div.setAttribute("x",width); div.setAttribute("y",height); div.setAttribute("z",div.style.zIndex); div.style.left=String(clientX/2-width/2-horizon/deep*zIndex)+"px"; div.style.top =String(clientY/2-height/2-vertical/deep*zIndex)+"px";  obj.appendChild(div);}function Drow3D(v,h,deep){ if(arguments.length<3)  deep = stageDeep; var obj =document.getElementById("circle_3D"); obj.innerHTML=""; for(var i=1; i<10; i++) {  DrowDiv(150,150,i*zDistance,v,h,deep,obj); } debug(v,h);}function Drow3DByMouse(v,h,deep){ if(arguments.length<3)  deep = stageDeep; h=event.pageX-(clientX/2); v=event.pageY-(clientY/2); var obj =document.getElementById("circle_3D"); obj.innerHTML=""; for(var i=1; i<10; i++) {  DrowDiv(150,150,i*zDistance,v,h,deep,obj); } debug("y="+v,"x="+h);}function createStage(){ var c = document.createElement("div"); c.setAttribute("id","circle_3D"); document.getElementsByTagName("body")[0].appendChild(c); stage = document.getElementById("circle_3D"); stage.style.width="1000px"; stage.style.height="500px"; stage.style.border="1px solid #666"; stage.style.overflow="hidden"; stage.style.cursor="crosshair";}var stage;createStage();var clientX = stage.style.width.substring(0,stage.style.width.indexOf("px"));var clientY = stage.style.height.substring(0,stage.style.height.indexOf("px"));setCross();var stageDeep=100;//舞台深度var zDistance = 40;//物體間的距離var p = AngletoPI(20);//角度//Drow3D(-10,50);document.addEventListener("mousemove",Drow3DByMouse); </script></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More