基于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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
canvas实现图像截取功能
Feb 06 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
详解 TypeScript 枚举类型
Nov 02 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
其他功能
2006/10/09 PHP
php2html php生成静态页函数
2008/12/08 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
Linux中为php配置伪静态
2014/12/17 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python实现调度算法代码详解
2017/12/01 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
JNI的定义
2012/11/25 面试题
运动会通讯稿50字
2014/01/30 职场文书
借款协议书
2014/04/12 职场文书
护理目标管理责任书
2014/07/25 职场文书
供电工程专业求职信
2014/08/09 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android