微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

js模拟3D场景效果代码打包_javascript技巧

php中文网

发布： 2016-05-16 17:57:39

原创

1314人浏览过

要在二维空间模拟出三维的效果，就需要把三维的坐标转换成二维坐标。一个最基本依据是：东西越远，看到大小就越小，坐标越往消失点靠拢。
　　透视公式：
　　 scale = fl / (fl + z);
　　 scale是大小的比例值，0.0到1.0之间，fl是观察点到成像面的距离，通常这个值是固定，z就是物件的三维空间中的z轴。
　　在写这些代码之前，我喜欢用面向对象来描述我写的这些东西，比如我需要一个场景，场景是个空间，空间内是可以容纳各种物件的，物件是个对象，物件是是x,y,z三个维度的，场景可以插入任意多的物件，物件就会以它的坐标值，显示在场景的特定位置，由场景来负责物件的显示位置。
　　一些demo，请使用鼠标移动及滚轮来控制。
效果1

腾讯云AI代码助手

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

腾讯云AI代码助手

98

腾讯云AI代码助手

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪3d透视效果</title>
<style> 
html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} 
#box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} 
#debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} 
</style>
<div id="box"> 
</div> 
<div id="debug"></div> 
<script> 
void function(window){ 
var document = window.document; 
var debug = document.getElementById('debug'); 
function ObjtoStr(obj){ 
var arr = []; 
for(var i in obj){ 
if(isNaN(obj[i])) continue; 
arr.push(i + ':' + obj[i]); 
} 
return arr.join('; '); 
} 
function getElementOffset(element){ 
var left = 0, top = 0; 
do{ 
left += element.offsetLeft; 
top += element.offsetTop; 
}while(element = element.offsetParent); 
return { 
left:left, 
top:top 
}; 
} 
function getMouseOffset(event){ 
return { 
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft), 
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop) 
}; 
} 
function addEventListener(element,type,fun){ 
if(element.addEventListener){ 
element.addEventListener(type,function(event){ 
fun(event); 
},false); 
}else{ 
element.attachEvent('on'+type,function(){ 
fun(window.event); 
}); 
} 
} 
function extend(subClass,supClass){ 
var fun = function(){}, 
prototype = subClass.prototype; 
fun.prototype = supClass.prototype; 
subClass.prototype = new fun(); 
for(var i in prototype){ 
subClass.prototype[i] = prototype[i]; 
} 
subClass.$supClass = supClass; 
subClass.prototype.$supClass = function(){ 
var supClass = arguments.callee.caller.$supClass; 
if(typeof supClass == 'function'){ 
supClass.apply(this,arguments); 
this.$supClass = supClass; 
} 
}; 
subClass.prototype.constructor = subClass; 
return subClass; 
} 
/** 
* WH类，高宽 
*/ 
function WH(w,h){ 
this.w = w; 
this.h = h; 
} 
WH.prototype = { 
clone:function(){ 
return new WH(this.w,this.h); 
} 
}; 
/** 
* xyz坐标类 
* 
*/ 
function XYZ(x,y,z){ 
this.x = x; 
this.y = y; 
this.z = z; 
} 
XYZ.prototype = { 
clone:function(){ 
return new XYZ(this.x,this.y,this.z); 
} 
}; 
/** 
* 场景类 
*/ 
function Scene(options){ 
//属性 
//dom 
this.element = null; 
//场景距离 
this.fl = 500; 
this.wh = null; 
//基准z轴 
this.baseZ = 0; 
//中心消失点坐标 
this.cX = 0; 
this.cY = 0; 
//中心消失点便宜 
this.cXl = 0; 
this.cYl = 0; 
//偏移系数 
this.ce = 1; 
this.ThingList = []; 
this.setOption(options); 
this.init(); 
} 
Scene.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'element': 
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i]; 
break; 
} 
} 
}, 
init:function(){ 
if(!this.element) throw new Error(90,'not box'); 
this.wh = new WH(this.element.clientWidth,this.element.clientHeight); 
this.bindEvent(); 
}, 
addThing:function(/* Thing */ thing){ 
this.ThingList.push(thing); 
this.calcPosition(thing); 
this.element.appendChild(thing.getElement(this)); 
}, 
//计算位置及大小 
calcPosition:function(/*Thing*/ thing){ 
this.cX = this.element.clientWidth/2; 
this.cY = this.element.clientHeight/2; 
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ); 
if(scale <= 0){ 
thing.element.style.display = 'none'; 
return ; 
}else{ 
thing.element.style.display = ''; 
} 
thing.element.style.width = thing.wh.w * scale + 'px'; 
thing.element.style.height = thing.wh.h * scale + 'px'; 
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; 
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; 
thing.element.style.zIndex = Math.round(scale*1000); 
if(thing.isOpacity){ 
thing.element.style.opacity = Math.min(scale*4.5,1); 
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; 
} 
}, 
bindEvent:function(){ 
var self = this; 
addEventListener(this.element,'mousemove',function(event){ 
self.onMouseMove(event); 
}); 
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; 
addEventListener(this.element,mousewheel,function(event){ 
self.onMouseWheel(event); 
}); 
}, 
//在场景内移动事件 
onMouseMove:function(event){ 
//场景的页面坐标 
var po = getElementOffset(this.element); 
//鼠标光标的页面坐标 
var ev = getMouseOffset(event); 
//场景内坐标 
var x = ev.x-po.left; 
var y = ev.y-po.top; 
//中间消失点的坐标偏移差 
this.cXl = (this.element.clientWidth/2 - x) * this.ce; 
this.cYl = (this.element.clientHeight/2 - y) * this.ce; 
this.reDraw(); 
}, 
onMouseWheel:function(event){ 
var code = event.wheelDelta || -event.detail; 
if(code > 0){ 
this.baseZ -= 200; 
}else{ 
this.baseZ += 200; 
} 
this.reDraw(); 
}, 
reDraw:function(){ 
for(var i=0 ; i<this.ThingList.length;i++){ 
this.calcPosition(this.ThingList[i]); 
} 
} 
}; 
/** 
* 物件抽象类 
*/ 
function Thing(options){ 
this.scene = null; 
this.wh = new WH(10,10); 
this.xyz = new XYZ(10,10,0); 
this.element = null; 
this.isOpacity = true; 
this.setOption(options); 
this.init(); 
} 
Thing.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'wh': 
case 'xyz': 
case 'isOpacity': 
this[i] = options[i]; 
break; 
default: 
break; 
} 
} 
}, 
init:function(){ 
this.element = this.draw(); 
this.element.style.position = 'absolute'; 
this.element.style.width = this.wh.w + 'px'; 
this.element.style.height = this.wh.h + 'px'; 
}, 
draw:function(){ 
throw new Error(998,'method do not realize!'); 
}, 
getElement:function(/*Scene*/ scene){ 
this.scene = scene; 
return this.element; 
} 
}; 
function Diam(options){ 
this.$supClass(options); 
} 
Diam.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
loadimg = img.cloneNode(true); 
loadimg.onload = function(){ 
self.wh = new WH(this.width,this.height); 
} 
img.src = [ 
'/upload/201201/20120105103758227.jpg', 
'/upload/201201/20120105103801969.jpg', 
'/upload/201201/20120105103801207.jpg', 
'/upload/201201/20120105103801956.jpg', 
'/upload/201201/20120105103801732.jpg', 
'/upload/201201/20120105103801346.jpg', 
'/upload/201201/20120105103801362.jpg' 
][Math.round(Math.random()*6)]; 
return img; 
} 
}; 
extend(Diam,Thing); 
function Sky(options){ 
this.$supClass(options); 
} 
Sky.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
img.src = [ 
'/upload/201201/20120105103801314.jpg', 
'/upload/201201/20120105103803325.jpg', 
'/upload/201201/20120105103803314.jpg', 
'/upload/201201/20120105103803146.jpg' 
][Math.round(Math.random()*3)]; 
return img; 
} 
}; 
extend(Sky,Thing); 
var scene = new Scene({ 
'element':'box' 
}); 
for(var i= 0 ; i < 50 ;i++){ 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(Math.random() * document.body.clientWidth,Math.random() *document.body.clientHeight,Math.random() *8000) 
})); 
} 
scene.addThing(new Sky({ 
wh:new WH(160000,120000), 
xyz:new XYZ(-80000,-60000,54000), 
isOpacity:false 
})); 
}(window); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

效果2

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪3d透视效果</title>
<style> 
html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} 
#box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} 
#debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} 
</style>
<div id="box"> 
</div> 
<div id="debug"></div> 
<script> 
void function(window){ 
var document = window.document; 
var debug = document.getElementById('debug'); 
function ObjtoStr(obj){ 
var arr = []; 
for(var i in obj){ 
if(isNaN(obj[i])) continue; 
arr.push(i + ':' + obj[i]); 
} 
return arr.join('; '); 
} 
function getElementOffset(element){ 
var left = 0, top = 0; 
do{ 
left += element.offsetLeft; 
top += element.offsetTop; 
}while(element = element.offsetParent); 
return { 
left:left, 
top:top 
}; 
} 
function getMouseOffset(event){ 
return { 
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft), 
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop) 
}; 
} 
function addEventListener(element,type,fun){ 
if(element.addEventListener){ 
element.addEventListener(type,function(event){ 
fun(event); 
},false); 
}else{ 
element.attachEvent('on'+type,function(){ 
fun(window.event); 
}); 
} 
} 
function extend(subClass,supClass){ 
var fun = function(){}, 
prototype = subClass.prototype; 
fun.prototype = supClass.prototype; 
subClass.prototype = new fun(); 
for(var i in prototype){ 
subClass.prototype[i] = prototype[i]; 
} 
subClass.$supClass = supClass; 
subClass.prototype.$supClass = function(){ 
var supClass = arguments.callee.caller.$supClass; 
if(typeof supClass == 'function'){ 
supClass.apply(this,arguments); 
this.$supClass = supClass; 
} 
}; 
subClass.prototype.constructor = subClass; 
return subClass; 
} 
/** 
* WH类，高宽 
*/ 
function WH(w,h){ 
this.w = w; 
this.h = h; 
} 
WH.prototype = { 
clone:function(){ 
return new WH(this.w,this.h); 
} 
}; 
/** 
* xyz坐标类 
* 
*/ 
function XYZ(x,y,z){ 
this.x = x; 
this.y = y; 
this.z = z; 
} 
XYZ.prototype = { 
clone:function(){ 
return new XYZ(this.x,this.y,this.z); 
} 
}; 
/** 
* 场景类 
*/ 
function Scene(options){ 
//属性 
//dom 
this.element = null; 
//场景距离 
this.fl = 500; 
this.wh = null; 
//基准z轴 
this.baseZ = 0; 
//中心消失点坐标 
this.cX = 0; 
this.cY = 0; 
//中心消失点便宜 
this.cXl = 0; 
this.cYl = 0; 
//偏移系数 
this.ce = 5; 
this.ThingList = []; 
this.setOption(options); 
this.init(); 
} 
Scene.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'element': 
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i]; 
break; 
} 
} 
}, 
init:function(){ 
if(!this.element) throw new Error(90,'not box'); 
this.wh = new WH(this.element.clientWidth,this.element.clientHeight); 
this.bindEvent(); 
}, 
addThing:function(/* Thing */ thing){ 
this.ThingList.push(thing); 
this.calcPosition(thing); 
this.element.appendChild(thing.getElement(this)); 
}, 
//计算位置及大小 
calcPosition:function(/*Thing*/ thing){ 
this.cX = this.element.clientWidth/2; 
this.cY = this.element.clientHeight/2; 
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ); 
if(scale <= 0){ 
thing.element.style.display = 'none'; 
return ; 
}else{ 
thing.element.style.display = ''; 
} 
thing.element.style.width = thing.wh.w * scale + 'px'; 
thing.element.style.height = thing.wh.h * scale + 'px'; 
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; 
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; 
thing.element.style.zIndex = Math.round(scale*1000); 
if(thing.isOpacity){ 
thing.element.style.opacity = Math.min(scale*4.5,1); 
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; 
} 
}, 
bindEvent:function(){ 
var self = this; 
addEventListener(this.element,'mousemove',function(event){ 
self.onMouseMove(event); 
}); 
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; 
addEventListener(this.element,mousewheel,function(event){ 
self.onMouseWheel(event); 
}); 
}, 
//在场景内移动事件 
onMouseMove:function(event){ 
//场景的页面坐标 
var po = getElementOffset(this.element); 
//鼠标光标的页面坐标 
var ev = getMouseOffset(event); 
//场景内坐标 
var x = ev.x-po.left; 
var y = ev.y-po.top; 
//中间消失点的坐标偏移差 
this.cXl = (this.element.clientWidth/2 - x) * this.ce; 
this.cYl = (this.element.clientHeight/2 - y) * this.ce; 
this.reDraw(); 
}, 
onMouseWheel:function(event){ 
var code = event.wheelDelta || -event.detail; 
if(code > 0){ 
this.baseZ -= 200; 
}else{ 
this.baseZ += 200; 
} 
this.reDraw(); 
}, 
reDraw:function(){ 
for(var i=0 ; i<this.ThingList.length;i++){ 
this.calcPosition(this.ThingList[i]); 
} 
} 
}; 
/** 
* 物件抽象类 
*/ 
function Thing(options){ 
this.scene = null; 
this.wh = new WH(10,10); 
this.xyz = new XYZ(10,10,0); 
this.element = null; 
this.isOpacity = true; 
this.setOption(options); 
this.init(); 
} 
Thing.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'wh': 
case 'xyz': 
case 'isOpacity': 
this[i] = options[i]; 
break; 
default: 
break; 
} 
} 
}, 
init:function(){ 
this.element = this.draw(); 
this.element.style.position = 'absolute'; 
this.element.style.width = this.wh.w + 'px'; 
this.element.style.height = this.wh.h + 'px'; 
}, 
draw:function(){ 
throw new Error(998,'method do not realize!'); 
}, 
getElement:function(/*Scene*/ scene){ 
this.scene = scene; 
return this.element; 
} 
}; 
function Diam(options){ 
this.$supClass(options); 
} 
Diam.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
loadimg = img.cloneNode(true); 
loadimg.onload = function(){ 
self.wh = new WH(this.width,this.height); 
} 
img.src = [ 
'/upload/201201/20120105103758227.jpg', 
'/upload/201201/20120105103801969.jpg', 
'/upload/201201/20120105103801207.jpg', 
'/upload/201201/20120105103801956.jpg', 
'/upload/201201/20120105103801732.jpg', 
'/upload/201201/20120105103801346.jpg', 
'/upload/201201/20120105103801362.jpg' 
][Math.round(Math.random()*6)]; 
return img; 
} 
}; 
extend(Diam,Thing); 
function Sky(options){ 
this.$supClass(options); 
} 
Sky.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
img.src = [ 
'/upload/201201/20120105103801314.jpg', 
'/upload/201201/20120105103803325.jpg', 
'/upload/201201/20120105103803314.jpg', 
'/upload/201201/20120105103803146.jpg' 
][Math.round(Math.random()*3)]; 
return img; 
} 
}; 
extend(Sky,Thing); 
var scene = new Scene({ 
'element':'box' 
}); 
for(var i= 0,x,z ; i < 50 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i= 0,x,z ; i < 50 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
z = (Math.cos(Math.PI*2*(i/50)) * 1000)+3000; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,document.body.clientHeight/2+200,z) 
})); 
} 
scene.addThing(new Sky({ 
wh:new WH(160000,120000), 
xyz:new XYZ(-80000,-60000,54000), 
isOpacity:false 
})); 
}(window); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

效果3

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪3d透视效果</title>
<style> 
html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} 
#box{ background:#fff; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} 
#debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} 
</style>
<div id="box"> 
</div> 
<div id="debug"></div> 
<script> 
void function(window){ 
/** 
* by Od 2011/12/25 
*/ 
var document = window.document; 
var debug = document.getElementById('debug'); 
function ObjtoStr(obj){ 
var arr = []; 
for(var i in obj){ 
if(isNaN(obj[i])) continue; 
arr.push(i + ':' + obj[i]); 
} 
return arr.join('; '); 
} 
function getElementOffset(element){ 
var left = 0, top = 0; 
do{ 
left += element.offsetLeft; 
top += element.offsetTop; 
}while(element = element.offsetParent); 
return { 
left:left, 
top:top 
}; 
} 
function getMouseOffset(event){ 
return { 
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft), 
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop) 
}; 
} 
function addEventListener(element,type,fun){ 
if(element.addEventListener){ 
element.addEventListener(type,function(event){ 
fun(event); 
},false); 
}else{ 
element.attachEvent('on'+type,function(){ 
fun(window.event); 
}); 
} 
} 
function extend(subClass,supClass){ 
var fun = function(){}, 
prototype = subClass.prototype; 
fun.prototype = supClass.prototype; 
subClass.prototype = new fun(); 
for(var i in prototype){ 
subClass.prototype[i] = prototype[i]; 
} 
subClass.$supClass = supClass; 
subClass.prototype.$supClass = function(){ 
var supClass = arguments.callee.caller.$supClass; 
if(typeof supClass == 'function'){ 
supClass.apply(this,arguments); 
this.$supClass = supClass; 
} 
}; 
subClass.prototype.constructor = subClass; 
return subClass; 
} 
/** 
* WH类，高宽 
*/ 
function WH(w,h){ 
this.w = w; 
this.h = h; 
} 
WH.prototype = { 
clone:function(){ 
return new WH(this.w,this.h); 
} 
}; 
/** 
* xyz坐标类 
* 
*/ 
function XYZ(x,y,z){ 
this.x = x; 
this.y = y; 
this.z = z; 
} 
XYZ.prototype = { 
clone:function(){ 
return new XYZ(this.x,this.y,this.z); 
} 
}; 
/** 
* 场景类 
*/ 
function Scene(options){ 
//属性 
//dom 
this.element = null; 
//场景距离 
this.fl = 500; 
this.wh = null; 
//基准z轴 
this.baseZ = 0; 
//中心消失点坐标 
this.cX = 0; 
this.cY = 0; 
//中心消失点便宜 
this.cXl = 0; 
this.cYl = 0; 
//偏移系数 
this.ce = 1; 
this.ThingList = []; 
this.setOption(options); 
this.init(); 
} 
Scene.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'element': 
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i]; 
break; 
} 
} 
}, 
init:function(){ 
if(!this.element) throw new Error(90,'not box'); 
this.wh = new WH(this.element.clientWidth,this.element.clientHeight); 
this.bindEvent(); 
}, 
addThing:function(/* Thing */ thing){ 
this.ThingList.push(thing); 
this.calcPosition(thing); 
this.element.appendChild(thing.getElement(this)); 
}, 
//计算位置及大小 
calcPosition:function(/*Thing*/ thing){ 
this.cX = this.element.clientWidth/2; 
this.cY = this.element.clientHeight/2; 
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ); 
if(scale <= 0){ 
thing.element.style.display = 'none'; 
return ; 
}else{ 
thing.element.style.display = ''; 
} 
thing.element.style.width = thing.wh.w * scale + 'px'; 
thing.element.style.height = thing.wh.h * scale + 'px'; 
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; 
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; 
thing.element.style.zIndex = Math.round(scale*1000); 
thing.element.style.opacity = Math.min(scale*4.5,1); 
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; 
}, 
bindEvent:function(){ 
var self = this; 
addEventListener(this.element,'mousemove',function(event){ 
self.onMouseMove(event); 
}); 
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; 
addEventListener(this.element,mousewheel,function(event){ 
self.onMouseWheel(event); 
}); 
setInterval(function(){ 
self.onEnterFrame(); 
},40); 
}, 
//在场景内移动事件 
onMouseMove:function(event){ 
//场景的页面坐标 
var po = getElementOffset(this.element); 
//鼠标光标的页面坐标 
var ev = getMouseOffset(event); 
//场景内坐标 
var x = ev.x-po.left; 
var y = ev.y-po.top; 
//中间消失点的坐标偏移差 
this.cXl = (this.element.clientWidth/2 - x) * this.ce; 
this.cYl = (this.element.clientHeight/2 - y) * this.ce; 
this.reDraw(); 
}, 
onMouseWheel:function(event){ 
var code = event.wheelDelta || -event.detail; 
if(code > 0){ 
this.baseZ -= 200; 
}else{ 
this.baseZ += 200; 
} 
this.reDraw(); 
}, 
onEnterFrame:function(){ 
var thing; 
for(var i=0; i<this.ThingList.length;i++){ 
thing = this.ThingList[i]; 
if(thing.isstatic) continue; 
if(thing.xyz.y+1 >this.wh.h){ 
thing.xyz.y = 0; 
}else{ 
thing.xyz.y += 20; 
} 
this.calcPosition(thing); 
} 
}, 
reDraw:function(){ 
for(var i=0 ; i<this.ThingList.length;i++){ 
this.calcPosition(this.ThingList[i]); 
} 
} 
}; 
/** 
* 物件抽象类 
*/ 
function Thing(options){ 
this.scene = null; 
this.wh = null; 
this.xyz = new XYZ(10,10,0); 
this.element = null; 
this.isstatic = false; 
this.setOption(options); 
this.init(); 
} 
Thing.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'wh': 
case 'xyz': 
case 'isstatic': 
this[i] = options[i]; 
break; 
default: 
break; 
} 
} 
}, 
init:function(){ 
this.element = this.draw(); 
this.element.style.position = 'absolute'; 
this.element.style.width = this.wh.w + 'px'; 
this.element.style.height = this.wh.h + 'px'; 
}, 
draw:function(){ 
throw new Error(998,'method do not realize!'); 
}, 
getElement:function(/*Scene*/ scene){ 
this.scene = scene; 
return this.element; 
} 
}; 
function Snowflake(options){ 
this.$supClass(options); 
} 
Snowflake.prototype = { 
draw:function(){ 
var img = document.createElement('img'),self = this; 
loadimg = img.cloneNode(true); 
loadimg.onload = function(){ 
//self.wh = new WH(this.width,this.height); 
} 
img.src = loadimg.src = [ 
'/upload/201201/20120105103804884.gif', 
'/upload/201201/20120105103804792.gif', 
'/upload/201201/20120105103804222.gif', 
'/upload/201201/20120105103804213.gif', 
'/upload/201201/20120105103804180.gif', 
'/upload/201201/20120105103804588.gif' 
][Math.round(Math.random()*5)]; 
return img; 
} 
}; 
extend(Snowflake,Thing); 
var scene = new Scene({ 
'element':'box' 
}); 
function tree(options){ 
this.$supClass(options); 
} 
tree.prototype = { 
draw:function(){ 
var img = document.createElement('img'),self = this; 
img.src = '/upload/201201/20120105103804497.gif'; 
return img; 
} 
}; 
extend(tree,Thing); 
for(var i= 0,x,z ; i < 100 ;i++){ 
scene.addThing(new Snowflake({ 
wh:new WH(50,50), 
xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth),Math.round(Math.random()*document.body.clientHeight),Math.round(Math.random()*6000-1000)) 
})); 
} 
for(var i= 0,x,z ; i < 80 ;i++){ 
scene.addThing(new tree({ 
wh:new WH(500,800), 
isstatic:true, 
xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth),Math.round(document.body.clientHeight),Math.round(Math.random()*6000-1000)) 
})); 
} 
for(var i= 0,x,z ; i < 80 ;i++){ 
scene.addThing(new tree({ 
wh:new WH(500,800), 
isstatic:true, 
xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth*20),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+3000)) 
})); 
} 
for(var i= 0,x,z ; i < 80 ;i++){ 
scene.addThing(new tree({ 
wh:new WH(500,800), 
isstatic:true, 
xyz:new XYZ(Math.round(Math.random()*-document.body.clientWidth*20),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+3000)) 
})); 
} 
for(var i= 0,x,z ; i < 80 ;i++){ 
scene.addThing(new tree({ 
wh:new WH(500,800), 
isstatic:true, 
xyz:new XYZ(Math.round(Math.random()*-document.body.clientWidth*10),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+1000)) 
})); 
} 
}(window); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

效果4

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪3d透视效果</title>
<style> 
html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} 
#box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} 
#debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} 
</style>
<div id="box"> 
</div> 
<div id="debug"></div> 
<script> 
void function(window){ 
var document = window.document; 
var debug = document.getElementById('debug'); 
function ObjtoStr(obj){ 
var arr = []; 
for(var i in obj){ 
if(isNaN(obj[i])) continue; 
arr.push(i + ':' + obj[i]); 
} 
return arr.join('; '); 
} 
function getElementOffset(element){ 
var left = 0, top = 0; 
do{ 
left += element.offsetLeft; 
top += element.offsetTop; 
}while(element = element.offsetParent); 
return { 
left:left, 
top:top 
}; 
} 
function getMouseOffset(event){ 
return { 
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft), 
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop) 
}; 
} 
function addEventListener(element,type,fun){ 
if(element.addEventListener){ 
element.addEventListener(type,function(event){ 
fun(event); 
},false); 
}else{ 
element.attachEvent('on'+type,function(){ 
fun(window.event); 
}); 
} 
} 
function extend(subClass,supClass){ 
var fun = function(){}, 
prototype = subClass.prototype; 
fun.prototype = supClass.prototype; 
subClass.prototype = new fun(); 
for(var i in prototype){ 
subClass.prototype[i] = prototype[i]; 
} 
subClass.$supClass = supClass; 
subClass.prototype.$supClass = function(){ 
var supClass = arguments.callee.caller.$supClass; 
if(typeof supClass == 'function'){ 
supClass.apply(this,arguments); 
this.$supClass = supClass; 
} 
}; 
subClass.prototype.constructor = subClass; 
return subClass; 
} 
/** 
* WH类，高宽 
*/ 
function WH(w,h){ 
this.w = w; 
this.h = h; 
} 
WH.prototype = { 
clone:function(){ 
return new WH(this.w,this.h); 
} 
}; 
/** 
* xyz坐标类 
* 
*/ 
function XYZ(x,y,z){ 
this.x = x; 
this.y = y; 
this.z = z; 
} 
XYZ.prototype = { 
clone:function(){ 
return new XYZ(this.x,this.y,this.z); 
} 
}; 
/** 
* 场景类 
*/ 
function Scene(options){ 
//属性 
//dom 
this.element = null; 
//场景距离 
this.fl = 500; 
this.wh = null; 
//基准z轴 
this.baseZ = 0; 
//中心消失点坐标 
this.cX = 0; 
this.cY = 0; 
//中心消失点便宜 
this.cXl = 0; 
this.cYl = 0; 
//偏移系数 
this.ce = 9; 
this.ThingList = []; 
this.setOption(options); 
this.init(); 
} 
Scene.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'element': 
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i]; 
break; 
} 
} 
}, 
init:function(){ 
if(!this.element) throw new Error(90,'not box'); 
this.wh = new WH(this.element.clientWidth,this.element.clientHeight); 
this.bindEvent(); 
}, 
addThing:function(/* Thing */ thing){ 
this.ThingList.push(thing); 
this.calcPosition(thing); 
this.element.appendChild(thing.getElement(this)); 
}, 
//计算位置及大小 
calcPosition:function(/*Thing*/ thing){ 
this.cX = this.element.clientWidth/2; 
this.cY = this.element.clientHeight/2; 
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ); 
if(scale <= 0){ 
thing.element.style.display = 'none'; 
return ; 
}else{ 
thing.element.style.display = ''; 
} 
thing.element.style.width = thing.wh.w * scale + 'px'; 
thing.element.style.height = thing.wh.h * scale + 'px'; 
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; 
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; 
thing.element.style.zIndex = Math.round(scale*1000); 
if(thing.isOpacity){ 
thing.element.style.opacity = Math.min(scale*4.5,1); 
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; 
} 
}, 
bindEvent:function(){ 
var self = this; 
addEventListener(this.element,'mousemove',function(event){ 
self.onMouseMove(event); 
}); 
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; 
addEventListener(this.element,mousewheel,function(event){ 
self.onMouseWheel(event); 
}); 
}, 
//在场景内移动事件 
onMouseMove:function(event){ 
//场景的页面坐标 
var po = getElementOffset(this.element); 
//鼠标光标的页面坐标 
var ev = getMouseOffset(event); 
//场景内坐标 
var x = ev.x-po.left; 
var y = ev.y-po.top; 
//中间消失点的坐标偏移差 
this.cXl = (this.element.clientWidth/2 - x) * this.ce; 
this.cYl = (this.element.clientHeight/2 - y) * this.ce; 
this.reDraw(); 
}, 
onMouseWheel:function(event){ 
var code = event.wheelDelta || -event.detail; 
if(code > 0){ 
this.baseZ -= 200; 
}else{ 
this.baseZ += 200; 
} 
this.reDraw(); 
}, 
reDraw:function(){ 
for(var i=0 ; i<this.ThingList.length;i++){ 
this.calcPosition(this.ThingList[i]); 
} 
} 
}; 
/** 
* 物件抽象类 
*/ 
function Thing(options){ 
this.scene = null; 
this.wh = new WH(10,10); 
this.xyz = new XYZ(10,10,0); 
this.element = null; 
this.isstats = false; 
this.isOpacity = true; 
this.setOption(options); 
this.init(); 
} 
Thing.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'wh': 
case 'xyz': 
case 'isOpacity': 
this[i] = options[i]; 
break; 
default: 
break; 
} 
} 
}, 
init:function(){ 
this.element = this.draw(); 
this.element.style.position = 'absolute'; 
this.element.style.width = this.wh.w + 'px'; 
this.element.style.height = this.wh.h + 'px'; 
}, 
draw:function(){ 
throw new Error(998,'method do not realize!'); 
}, 
getElement:function(/*Scene*/ scene){ 
this.scene = scene; 
return this.element; 
} 
}; 
function Diam(options){ 
this.$supClass(options); 
} 
Diam.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
loadimg = img.cloneNode(true); 
loadimg.onload = function(){ 
self.wh = new WH(this.width,this.height); 
} 
img.src = [ 
'/upload/201201/20120105103758227.jpg', 
'/upload/201201/20120105103801969.jpg', 
'/upload/201201/20120105103801207.jpg', 
'/upload/201201/20120105103801956.jpg', 
'/upload/201201/20120105103801732.jpg', 
'/upload/201201/20120105103801346.jpg', 
'/upload/201201/20120105103801362.jpg' 
][Math.round(Math.random()*6)]; 
return img; 
} 
}; 
extend(Diam,Thing); 
function Sky(options){ 
this.$supClass(options); 
} 
Sky.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
img.src = [ 
'/upload/201201/20120105103801314.jpg', 
'/upload/201201/20120105103803325.jpg', 
'/upload/201201/20120105103803314.jpg', 
'/upload/201201/20120105103803146.jpg' 
][Math.round(Math.random()*3)]; 
return img; 
} 
}; 
extend(Sky,Thing); 
var scene = new Scene({ 
'element':'box' 
}); 
for(var i= 20,x,z ; i < 40 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i=11,x,z ; i < 31 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+1680; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i=9,x,z ; i < 40 ;i++){ 
x = i*50 -890; 
y = i*60 + 200; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i=9,x,z ; i < 40 ;i++){ 
x = i*-50 +3090; 
y = i*60 + 200; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i= 20,x,z ; i < 40 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,5000) 
})); 
} 
for(var i=11,x,z ; i < 31 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+1680; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,5000) 
})); 
} 
for(var i=9,x,z ; i < 40 ;i++){ 
x = i*50 -890; 
y = i*60 + 200; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,5000) 
})); 
} 
for(var i=9,x,z ; i < 40 ;i++){ 
x = i*-50 +3090; 
y = i*60 + 200; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,5000) 
})); 
} 
scene.addThing(new Sky({ 
wh:new WH(160000,120000), 
xyz:new XYZ(-80000,-60000,54000), 
isOpacity:false 
})); 
/* 
for(var i= 0,x,z ; i < 50 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
z = (Math.cos(Math.PI*2*(i/50)) * 1000)+3000; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,document.body.clientHeight/2+200,z) 
})); 
}*/ 
}(window); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

使用WebGL实现3D立方体渲染_javascript技巧 CSS元素打印缺失：背景色与边框的打印兼容性指南 Web页面打印：确保背景色与动态线条可见性解决HTML网站上ASCII 3D文本渲染瑕疵的指南 WebGL与JavaScript 3D图形编程

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：javascript是怎么继承的介绍_javascript技巧下一篇：DOM和XMLHttpRequest对象的属性和方法整理_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

全栈JS怎么实现文件下载_文件下载功能前端调用与Node后端实现教程前端通过fetch获取文件流并创建BlobURL，利用隐藏a标签触发下载；2.后端使用Node.js的Express框架，通过res.download发送本地文件或res.send发送动态生成内容，并设置Content-Disposition响应头以触发浏览器下载；3.对于大文件，采用fs.createReadStream进行流式传输，避免内存溢出；4.跨域时需配置CORS并暴露Content-Disposition头部；5.生产环境应增加权限校验确保安全。

2025-11-16 19:27:37

429

怎样通过js脚本修改网页内容_js动态修改网页元素内容的方法使用textContent修改文本，innerHTML插入HTML，value更新表单值，setAttribute和style修改属性与样式，注意安全与事件触发。

2025-11-16 19:11:53

980

JS正则表达式实战_表单验证技巧合集邮箱验证使用基础正则/^[a-zA-Z0-9.\_-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/覆盖常见格式；2.手机号用/^1\[3-9\]\\d{9}$/匹配大陆主流号段；3.密码需至少8位并包含大小写、数字、特殊字符中三项，通过分步正则检测；4.身份证采用简化正则/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|X)$/校验18位结构；5.中文姓名用/^\[\\u4e00-\\u9fa

2025-11-16 19:10:03

955

使用 JavaScript 根据多个属性对数组对象进行分组本文介绍如何使用JavaScript中的reduce方法，根据对象数组中多个属性的值对数组进行分组。通过修改现有的groupByObjectKey函数，使其能够接受一个属性键数组，并生成一个复合键来实现更细粒度的分组。

2025-11-16 19:09:06

871

如何在JavaScript中根据多个属性对数组对象进行分组本文将深入探讨如何在JavaScript中对包含对象的数组进行分组，特别是当需要根据多个属性（而非单个属性）进行分组时。我们将从单属性分组的基础方法入手，逐步展示如何优化groupBy函数，使其能够接受一个属性键数组，并通过构建复合键来实现多属性分组。文章将提供详细的代码示例和注意事项，帮助开发者高效地管理和组织数据。

2025-11-16 18:59:02

941

如何为密码保护的网页设置多个密码（HTML/JS）本文介绍如何使用JavaScript为密码保护的网页设置多个有效密码。通过将密码存储在数组中，并使用includes()方法验证用户输入，可以实现允许多个密码访问网页的功能。同时，强调了在客户端存储密码的安全性问题，并建议仅在非公开项目中使用此方法。

2025-11-16 18:36:07

198

使用JavaScript为网页添加多重密码验证机制本教程旨在指导如何在客户端HTML/JS网页中实现多密码验证机制。通过将预设密码存储在JavaScript数组中，并利用Array.prototype.includes()方法高效地校验用户输入，实现灵活的访问控制。文章将提供详细代码示例，并强调在前端存储敏感数据的安全考量，确保读者能够构建一个功能完善且具备一定安全意识的密码保护方案。

2025-11-16 18:20:01

913

构建一个功能完善的JavaScript音乐播放器教程本教程将指导您如何从零开始，使用HTML、CSS和JavaScript构建一个功能丰富的网页音乐播放器。文章详细介绍了播放器的HTML结构搭建、核心JavaScript逻辑实现，包括歌曲加载、播放/暂停控制、切换歌曲、进度条显示、音量调节以及动态UI更新。通过本教程，您将掌握构建交互式音频应用的关键技术，并解决开发过程中可能遇到的常见问题，如DOM操作错误。

2025-11-16 18:12:02

621

Discord.js v14 交互式分页组件实现与问题解决本文旨在解决Discord.jsv14中使用交互式按钮实现分页功能时，遇到的"Botisthinking..."消息持续显示以及交互失败的问题。通过分析问题原因，提供了一种无需发送和删除空消息的解决方案，并分享了优化交互体验的技巧。

2025-11-16 18:06:05

154

JS判断设备类型与浏览器信息的方法_javascript技巧答案：通过解析navigator.userAgent并结合现代API可准确判断设备类型和浏览器。首先利用UserAgent中的关键词识别移动设备、区分iOS与Android，并结合屏幕尺寸判断平板；再通过特征字符串匹配识别Chrome、Safari、Firefox、Edge及IE浏览器；进一步使用window.innerWidth、touch事件支持和matchMedia等API提升判断精度，建议多方法结合以应对UserAgent伪造问题，并定期更新规则适配新设备。

2025-11-16 17:59:02

269

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部