JS伪3D 图形透视效果
本文地址：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 : [email protected]
//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>
