JS伪3D 图形透视效果_js3d斜向穿透排版

作者：代码探险家 | 2024-07-16 14:24:22

踩

js3d斜向穿透排版

本文地址：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 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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/834641