基于jquery的3d效果实现代码
2024-05-06 14:25:05
供稿：网友
代码如下:
<html>
<head>
<script type="text/javascript" src="http://demo.Vevb.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)
