JS伪3D 图形透视效果

来源：互联网发布：excel两个表格数据相同编辑：程序博客网时间：2024/06/10 11:10

本文地址：http://blog.csdn.net/ei__nino/article/details/9243331

本来是想实现多个圆片的透视效果，对于运算都是测试得出的。不是严谨的数学计算。

使用简单的div布局，css设置的一些形式

有舞台深度stageDeep，圆片深度距离zDistance，和修正角度p可以设置调节图像的整体显示效果。

图形随鼠标运动而运动。

Google Chrom下表现最好。不支持FF

演示地址：http://www.einino.net/circle2.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 endfunction 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>