Copy codeThe Code is as follows:
<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,
'Seccne': 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'00000000.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 = '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 ){
Hsf-this.div.css ('height ');
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,
'Seccne': 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> 'faces .css ({
Width: '200 ',
Height: '20140901 ',
Background: '#777'
})
K. data =;
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>