基于jquery的3d效果实现代码


Posted in Javascript onMarch 23, 2011
<html> 
<head> 
<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery-1.4.2.min.js"></script><style> 
.s_c{ 
position:relative; 
width:800px; 
height:300px; 
border:1px solid #000; 
overflow:hidden; 
} 
</style> 
<script type="text/javascript"> 
var Sl=Sl||{}; 
(function(){ 
var undefined; 
function box(o){ 
var d=$.extend({},{ 
'w':40, 
'h':30, 
'secne':null, 
'data':'' 
},o); 
if(d.secne==null||!d.secne) return; 
this.div=$("<div></div>").css({'position': 'absolute','border':'1px solid #cde','left':'0px','top':'0px'}).html(d.data); 
this.w(d.w); 
this.h(d.h); 
this._ow=this.w(); 
this._oh=this.h(); 
$(d.secne).append(this.div); 
return this; 
} 
box.prototype.zoomw=function(v){ 
if(v==undefined){ 
this._zw=this._zw||1; 
return this._zw; 
} 
this.w(this.ow()*v,false); 
this._zw=v; 
return this; 
} 
box.prototype.zoomh=function(v){ 
if(v==undefined){ 
this._zh==this._zh||1; 
return this._zh; 
} 
this.h(this.oh()*v,false); 
this._zh=v; 
return this; 
} 
box.prototype.x=function(x){ 
if(x==undefined){ 
this._x=this._x||0; 
return this._x; 
} 
this.div.css({ 
left:x-(this.w())/2 
}) 
this._x=x; 
return this; 
} 
box.prototype.y=function(y){ 
if(y==undefined){ 
this._y=this._y||0; 
return this._y; 
} 
this.div.css({ 
top:y-(this.h())/2 
}) 
this._y=y; 
return this; 
} 
box.prototype.ow=function(){ 
return this._ow||0; 
} 
box.prototype.oh=function(){ 
return this._oh||0; 
} 
box.prototype.w=function(w,rs){ 
if(w==undefined){ 
w=this.div.css('width'); 
w=w=='auto'?this.div.width():w; 
return parseInt(w); 
} 
if(rs!==false) 
this._ow=w; 
this.mx(-(w-this.w())/2); 
this.div.css({'width':w}); 
return this; 
} 
box.prototype.h=function(h,rs){ 
if(h==undefined){ 
h=this.div.css('height'); 
h=h=='auto'?this.div.height():h; 
return parseInt(h); 
} 
if(rs!==false) 
this._oh=h; 
this.my(-(h-this.h())/2); 
this.div.css({'height':h}); 
return this; 
} 
box.prototype.mx=function(x){ 
var div=this.div; 
div.css({'left': parseInt(div.css('left'))+x}); 
} 
box.prototype.my=function(y){ 
var div=this.div; 
div.css({'top':parseInt(div.css('top'))+y}); 
} 
box.prototype.z=function(z){ 
if(z==undefined) 
return this.div.css('z-index'); 
this.div.css("z-index",z); 
return this; 
} 
//3d box 
function box3d(o){ 
if(!$(o.secne))return; 
secne=o.secne; 
var secne=this.secne=$(secne); 
this.vx= parseInt(secne.css('width')=='auto'?secne.width():secne.css('width'))/2; 
this.vy= parseInt(secne.css('height')=='auto'?secne.height():secne.css('height'))/2; 
this.fl=o.fl||250; 
this.box=new box(o).z(0); 
this._set3d(); 
return this; 
} 
box3d.prototype.x=function(x){ 
if(x==undefined) 
return this._x||0; 
this._x=x||0; 
this._set3d(); 
return this; 
} 
box3d.prototype.y=function(y){ 
if(y==undefined) 
return this._y||0; 
this._y=y||0; 
this._set3d(); 
return this; 
} 
box3d.prototype.z=function(z){ 
if(z==undefined) 
return this._z||0; 
this._z=z||0; 
this._set3d(); 
return this; 
} 
box3d.prototype._set3d=function(){ 
var boxo=this.box; 
var fl=this.fl; 
var zomx=fl/(fl+this.z()); 
var x=this.vx+zomx*this.x(); 
var y=this.vy+zomx*this.y(); 
boxo.zoomw(zomx).zoomh(zomx); 
boxo.x(x); 
boxo.y(y); 
} 

// 
function slide(o){ 
var d=$.extend({},{ 
'z':100, 
'secne':null 
},o); 
if(d.secne==null||!$(d.secne))return; 
this.cecne=d.secne; 
this.z=d.z; 
this.sleep=0.02; 
var k={'secne':d.secne,'w':80,'h':50,fl:1000}; 
this.box=[]; 
var c=8; 
for(var i=0;i<c;i++){ 
var t= parseInt(i-c/2); 
var a=$('<div></div>').css({ 
width:'100%', 
height:'100%', 
background:'#777' 
}) 
k.data=a; 
var ubox=new box3d(k).z(300); 
this.r(ubox,t/2); 
this.box.push(ubox); 
} 
this.re_index(); 
} 
slide.prototype._moveaction=function(){ 
var _this=this; 
var s=this.sleep; 
for(var i=0;i<this.box.length;i++){ 
this.r(this.box[i],s); 
} 
this.re_index(); 
} 
slide.prototype.r=function(rbox,s){ 
if(!(rbox instanceof box3d)) 
return; 
var X=rbox.x(); 
var Y=rbox.y() 
var Z=rbox.z(); 
var New_X = X*Math.cos(s) - Z*Math.sin(s); 
var New_Z = X*Math.sin(s) + Z*Math.cos(s); 
var New_Y = Y; 
rbox.x(New_X); 
rbox.y(New_Y); 
rbox.z(New_Z); 
} 
slide.prototype.re_index=function(){ 
var arr=this.box; 
var s=arr.length; 
for(var j=0;j<s-1;j++){ 
for(var i=0;i<s-j-1;i++){ 
if(arr[i].z()<arr[i+1].z()){ 
var c=arr[i]; 
arr[i]=arr[i+1]; 
arr[i+1]=c; 
} 
} 
} 
for(var i=0;i<arr.length;i++){ 
arr[i].box.z(i) 
} 
} 
slide.prototype.start=function(){ 
this.run=1; 
this._move(); 
} 
slide.prototype.stop=function(){ 
this.run=0; 
} 
slide.prototype._move=function(s){ 
var _this=this; 
setTimeout(function(){ 
if(!_this.run){ 
return; 
} 
_this._moveaction(); 
_this._move(); 
},50) 
} 
Sl.slide=slide; 
})() 
$(function(){ 
var s=new Sl.slide({secne:'.s_c'}); 
$('#start').click(function(){s.start()}) 
$('#stop').click(function(){s.stop()}) 
}) 
</script> 
</head> 
<body> 
<div class='s_c'></div> 
<button id="start">start</button> 
<button id="stop">stop</button> 
</body> 
</html>
Javascript 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
Angular的$http与$location
Dec 26 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 #Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 #Javascript
jquery图片上下tab切换效果
Mar 18 #Javascript
javascript一些实用技巧小结
Mar 18 #Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 #Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 #Javascript
javascript定时保存表单数据的代码
Mar 17 #Javascript
You might like
Ajax PHP简单入门教程代码
2008/04/25 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python自定义类并使用的方法
2015/05/07 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python模块之paramiko实例代码
2018/01/31 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
利用python循环创建多个文件的方法
2018/10/25 Python
详解Python with/as使用说明
2018/12/13 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
python中count函数知识点浅析
2020/12/17 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
办公室主任职责范文
2013/11/08 职场文书
医生进修自我鉴定
2014/01/19 职场文书
争论的故事教学反思
2014/02/06 职场文书
质量月活动策划方案
2014/03/10 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python