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

随机推荐

Delphi面向对象设计的经验原则（61条）
(1)所有数据都应该隐藏在所在的类的内部. (2)类的使用者必须依赖类的共有接口,但类不能依赖它的使用者. (3)尽量减少类的协议中的消息. (4)实现所有类都理解的最基本公有接口[例如,拷贝操作(深 ...
HDU 1535 Invitation Cards(SPFA,及其优化)
题意: 有编号1-P的站点, 有Q条公交车路线,公交车路线只从一个起点站直接到达终点站,是单向的,每条路线有它自己的车费. 有P个人早上从1出发,他们要到达每一个公交站点, 然后到了晚上再返回点1. ...
RealThinClient学习(一)
服务端代码: unit RtcHttpServer; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, ...
简单深刻：为控件创建MouseEnter和MouseLeave事件（覆盖WndProc，增加对消息的处理，真简单！）——连对CM_MOUSEENTER的消息处理都是颇有深意啊！
其实很简单: unit Unit1; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, D ...
thinkphp3.2入口文件
原文:thinkphp3.2入口文件 <?php define('DIR_SECURE_FILENAME', 'default.html');//错误页面 define('APP_PATH',' ...
JMS的样例
1.JMS是一个由AS提供的Message服务.它能接受消息产生者(Message Provider)所发出的消息,并把消息转发给消息消费者(Message Consumer).2.JMS提供2种类 ...
fs学习笔记之输出格式
接触fs那么久,有必要再记录一下. 上一篇介绍了fs拓扑描写叙述文件dot的格式,今天要介绍fs输出文件的格式. 举个样例,下面是d节点输出文件的一行记录,也就是一条流经过d的记录. textexpo ...
解析汽车B2C商城网站四种盈利模式
汽车已成为家庭的日常用品,汽车的配套设施也成为销售的热点,汽车B2C电子商城为行业营销的新平台,汽车B2C电子商务网站盈利的模式是怎样的?创新的盈利模式才能在行业竞争中生存. 资讯产品一体模式网站的 ...
Androidclient和server端数据交互的第一种方法
网上有非常多样例来演示Android客户端和server端数据怎样实现交互只是这些样例大多比較繁杂,对于刚開始学习的人来说这是不利的.如今介绍几种代码简单.逻辑清晰的交互样例,本篇博客介绍第一种: 一 ...
OpenStack 中的neutron-server启动过程
neutron-server是neutron的核心组件之中的一个.负责直接接收外部请求,然后调用后端对应plugin进行处理. 其核心启动过程代码主要在neutron.server包中. __init ...

JS伪3D 图形透视效果

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

随机推荐

热门专题