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 : 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>

JS伪3D 图形透视效果的更多相关文章

js 3d图形
使用Three.js在网上中进行3D图形的展示 Three.js的官网https://threejs.org/ 第一个Demo,生成一个旋转的正方体 <style> canvas { wi ...
WPF 图片浏览伪3D效果
原文:WPF 图片浏览伪3D效果首先上效果图: 因项目要求,需要把图片以"好看"."炫"的效果展示出来,特地研究了一下WPF关于3D方面的制作,奈何最终成果 ...
Tridiv：基于 Web 的 CSS 编辑器，创建炫丽 3D 图形
Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...
【翻译】基于web创建逼真的3D图形 | CSS技巧
个人翻译小站:http://www.zcfy.cc/article/creating-photorealistic-3d-graphics-on-the-web-css-tricks-4039.htm ...
Three.js - 走进3D的奇妙世界
本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳<three. ...
现代3D图形编程学习-基础简介(3)-什么是opengl (译)
本书系列现代3D图形编程学习 OpenGL是什么在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...
现代3D图形编程学习-基础简介(2) (译)
本书系列现代3D图形编程学习基础简介(2) 图形和渲染接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...
现代3D图形编程学习-基础简介(1) (译)
本书系列现代3D图形编程学习基础简介并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量在阅读这本书的时候,你需要熟悉代数和几何 ...
现代3D图形编程学习-环境设置
本书系列现代3D图形编程学习环境设置由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和win ...

随机推荐

与众不同 windows phone (24) - Input（输入）之软键盘类型, XNA 方式启动软键盘, UIElement 的 Touch 相关事件, 触摸涂鸦
原文:与众不同 windows phone (24) - Input(输入)之软键盘类型, XNA 方式启动软键盘, UIElement 的 Touch 相关事件, 触摸涂鸦 [索引页][源码下载] ...
Api之Cors跨域以及其他跨域方式
Web Api之Cors跨域以及其他跨域方式(三) 我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还 ...
LCA 最近公共祖先 tarjan离线总结结合3个例题
在网上找了一些对tarjan算法解释较好的文章并加入了自己的理解 LCA(Least Common Ancestor),顾名思义,是指在一棵树中,距离两个点最近的两者的公共节点.也就是说,在两个点通 ...
POJ2828 Buy Tickets 【线段树】+【单点更新】+【逆序】
Buy Tickets Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 12296 Accepted: 6071 Desc ...
IE与FF脚本兼容性问题
(1) window.event: 表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 (2) 获取事件源 IE用srcElement获取事件源,而FF用target获取 ...
跨域GET、POST请求
跨域GET.POST请求的小结重点:跨域POST大量数据: JQuery:$.ajax/$.getJSON支持jsonp格式的跨域,但是只支持GET方式,暂不支持POST: CORS:w3c关于跨域 ...
119 - Greedy Gift Givers
Greedy Gift Givers The Problem This problem involves determining, for a group of gift-giving frien ...
struts2对action中的方法进行输入校验（2）
struts2输入校验流程: 1.类型转换器对请求參数运行类型转换,并把转换后的值赋给aciton中的属性 2.假设在运行类型转换的过程中出现异常,系统会将异常信息保存到ActionContext, ...
c# WinForm开发 DataGridView控件的各种操作总结（单元格操作，属性设置）
一.单元格内容的操作 *****// 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index ...
Hibernate 配置详解(7)
hibernate.order_updates: Hibernate文档中提到,该配置用于在刷新一级缓存,提交UPDATE的时候,按照每类对象的主键顺序排序后再提交,可以在高并发情况下减少事务死锁的可 ...

JS伪3D 图形透视效果

JS伪3D 图形透视效果的更多相关文章

随机推荐

热门专题