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 ...
随机推荐
- minidump详细介绍
Effective minidump 简介 在过去几年里,崩溃转储(crash dump)成为了调试工作的一个重要部分.如果软件在客户现场或者测试实验室发生故障,最有价值的解决方式是能够创建一个故障瞬 ...
- 如何隐藏 QLPreviewController 的 Action 按钮？
在 iOS 6 以前,可以在 present QLPreviewController 之后使用以下代码: [previewController.navigationItem setRightBarBu ...
- 广东省-IT公司红黑榜排名
红榜Top100 Order Company Name Point Change 1 百富计算机技术(深圳)有限公司 94.00 -- 2 中国网通广州分公司 88.00 -- 3 深圳市汇 ...
- Transparency Tutorial with C# - Part 2
Download Compositing Mode demo project - 24 Kb Download Compositing Mode source - 26 Kb Download Com ...
- 11gR2RAC环境DBCA创建一个数据库错误ORA-15055 ORA-15001
11gR2RAC环境DBCA创建一个数据库错误ORA-15055 ORA-15001 象: 在11gR2 GridInfrastructure和Database软件安装完毕之后,运行DBCA创建数据库 ...
- Android开源项目大全 - 工具类
主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过依赖注入减少Vie ...
- [LeetCode]Swap Nodes in Pairs 成对交换
Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1->2-& ...
- ueditor编辑文章时候，复制粘贴内容，原来的图片不能显示
ueditor编辑文章时候.当现有文章有图片的时候, 再复制粘贴文本进去的时候.里面的图片就不能显示了, 编辑器查看文章Html代码,图片路径显示为:src="http://localhos ...
- pygtk手记(1)
GTK+使用C语言开发,但是其设计者使用面向对象技术. 也提供了C++(gtkmm).Perl.Ruby.Java和Python(PyGTK)绑定,其他的绑定有Ada.D.Haskell.PHP和所有 ...
- UVA 11237 - Halloween treats(鸽笼原理)
11237 - Halloween treats option=com_onlinejudge&Itemid=8&page=show_problem&category=516& ...