基于jquery的3d效果實現(xiàn)代碼

更新時間：2011年03月23日 22:20:16 作者：

基于jquery的3d效果實現(xiàn)代碼，需要的朋友可以參考下。

<html> 
<head> 
<script type="text/javascript" src="http://demo.jb51.net/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> 