3D图片现实效果

整个效果实现分三部分:(JS脚本、HTML页面,图片文件)

第一JS脚本,代码如下:3dcarousel.js

 

var  count  =   0
var  baseSpeed  =   0.05
var  radiusX  =   190
var  radiusY  =   40
var  centerX  =   300
var  centerY  =   190 ;
var  speed  =   0.3 ;
var  imageDivs  =   '' ;
var  numberOfElements  =   0 ;
var  carousel  =   '' ;
var  speedTest  =   '' ;


window.addEvent(
' domready ' function () {
  
    carousel 
= $('carousel');
    speedTest 
= $('speedTest');

    imageDivs 
= carousel.getElementsByTagName("div"); 
    numberOfElements 
= imageDivs.length; 
    
    setInterval(
'startCarousel()',40);
    
    carousel.addEvent(
'mousemove', onMouseMove.bindWithEvent( carousel ));
    
}
);

function  onMouseMove( evt )  {
    
    tempX 
= evt.client.x;
    speed 
= (tempX - centerX) / 2500;
    
}


function  startCarousel() {
    
    
for(i=0; i < numberOfElements; i++){
    
        angle 
= i * ( Math.PI * 2 ) / numberOfElements;
    
        imageDivsStyle 
= imageDivs[ i ].style; 
        imageDivsStyle.position
='absolute'
        
        posX 
= ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );
        posY 
= ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );
        
        
        imageDivsStyle.left 
= posX+"px"
        imageDivsStyle.top 
= posY+"px"
        
        imageDivWidth 
= posY/3;
        imageDivZIndex 
= Math.round(imageDivWidth)+100;
        
        imageDivsStyle.width 
= imageDivWidth+'px';
        imageDivsStyle.zIndex 
= imageDivZIndex;
        
        angle 
+= speed;
    
    }

    
    count
++
}

 mootools.js:

 

// MooTools, My Object Oriented Javascript Tools. Copyright (c) 2006-2007 Valerio Proietti, <http://mad4milk.net>, MIT Style License.

eval(
function (p,a,c,k,e,d) {e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'/w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('/b'+e(c)+'/b','g'),k[c])}}return p} ( ' h 7B={7H:'1.11'};7 $2A(L){6(L!=4D)};7 $k(L){c(!$2A(L))6 T;c(L.29)6'19';h k=2X L;c(k=='1C'&&L.7a){1r(L.3h){M 1:6'19';M 3:6(//S/).1Q(L.4d)?'76':'7j'}}c(k=='1C'||k=='7'){1r(L.4k){M 1d:6'N';M 3E:6'8e';M 1l:6'5A'}c(2X L.E=='41'){c(L.1u)6'8s';c(L.4C)6'C'}}6 k};7 $2m(){h 2h={};B(h i=0;i<C.E;i++){B(h q 14 C[i]){h 2M=C[i][q];h 2O=2h[q];c(2O&&$k(2M)=='1C'&&$k(2O)=='1C')2h[q]=$2m(2O,2M);K 2h[q]=2M}}6 2h};h $H=7(){h G=C;c(!G[1])G=[5,G[0]];B(h q 14 G[1])G[0][q]=G[1][q];6 G[0]};h $1X=7(){B(h i=0,l=C.E;i<l;i++){C[i].H=7(U){B(h X 14 U){c(!5.R[X])5.R[X]=U[X];c(!5[X])5[X]=$1X.36(X)}}}};$1X.36=7(X){6 7(v){6 5.R[X].2k(v,1d.R.4z.1o(C,1))}};$1X(3V,1d,3T,4s);7 $33(L){6!!(L||L===0)};7 $43(L,4N){6 $2A(L)?L:4N};7 $3d(1S,23){6 1N.5Y(1N.3d()*(23-1S+1)+1S)};7 $66(){6 17 6e().6g()};7 $5l(2a){6c(2a);68(2a);6 W};h 2d=7(L){L=L||{};L.H=$H;6 L};h 69=17 2d(r);h 5V=17 2d(J);J.4K=J.2K('4K')[0];r.4E=!!(J.5H);c(r.5F)r.1q=r[r.5I?'5U':'4o']=18;K c(J.4Z&&!J.72&&!6M.6I)r.2j=r[r.4E?'6S':'6Z']=18;K c(J.71!=W)r.3w=18;r.6Y=r.2j;6t.H=$H;c(2X 2q=='4D'){h 2q=7(){};c(r.2j)J.4i("7Q");2q.R=(r.2j)?r["[[6y.R]]"]:{}}2q.R.29=7(){};c(r.4o)3y{J.6w("6v",T,18)}3u(e){};h 1l=7(1v){h 2p=7(){6(C[0]!==W&&5.26&&$k(5.26)=='7')?5.26.2k(5,C):5};$H(2p,5);2p.R=1v;2p.4k=1l;6 2p};1l.2J=7(){};1l.R={H:7(1v){h 2N=17 5(W);B(h q 14 1v){h 4t=2N[q];2N[q]=1l.4A(4t,1v[q])}6 17 1l(2N)},6C:7(){B(h i=0,l=C.E;i<l;i++)$H(5.R,C[i])}};1l.4A=7(1J,1R){c(1J&&1J!=1R){h k=$k(1R);c(k!=$k(1J))6 1R;1r(k){M'7':h 3I=7(){5.3e=C.4C.3e;6 1R.2k(5,C)};3I.3e=1J;6 3I;M'1C':6 $2m(1J,1R)}}6 1R};1d.H({2W:7(t,v){B(h i=0,j=5.E;i<j;i++)t.1o(v,5[i],i,5)},4H:7(t,v){h 2e=[];B(h i=0,j=5.E;i<j;i++){c(t.1o(v,5[i],i,5))2e.1e(5[i])}6 2e},1A:7(t,v){h 2e=[];B(h i=0,j=5.E;i<j;i++)2e[i]=t.1o(v,5[i],i,5);6 2e},2D:7(t,v){B(h i=0,j=5.E;i<j;i++){c(!t.1o(v,5[i],i,5))6 T}6 18},6k:7(t,v){B(h i=0,j=5.E;i<j;i++){c(t.1o(v,5[i],i,5))6 18}6 T},22:7(1u,1i){h 2c=5.E;B(h i=(1i<0)?1N.23(0,2c+1i):1i||0;i<2c;i++){c(5[i]===1u)6 i}6-1},4w:7(1n,E){1n=1n||0;c(1n<0)1n=5.E+1n;E=E||(5.E-1n);h 3R=[];B(h i=0;i<E;i++)3R[i]=5[1n++];6 3R},2r:7(1u){h i=0;h 2c=5.E;4J(i<2c){c(5[i]===1u){5.2T(i,1);2c--}K{i++}}6 5},Q:7(1u,1i){6 5.22(1u,1i)!=-1},6o:7(Y){h L={},E=1N.1S(5.E,Y.E);B(h i=0;i<E;i++)L[Y[i]]=5[i];6 L},H:7(N){B(h i=0,j=N.E;i<j;i++)5.1e(N[i]);6 5},2m:7(N){B(h i=0,l=N.E;i<l;i++)5.4x(N[i]);6 5},4x:7(1u){c(!5.Q(1u))5.1e(1u);6 5},6p:7(){6 5[$3d(0,5.E-1)]||W},4L:7(){6 5[5.E-1]||W}});1d.R.1m=1d.R.2W;1d.1m=1d.2W;7 $A(N){6 1d.4w(N)};7 $1m(1K,t,v){c(1K&&2X 1K.E=='41'&&$k(1K)!='1C'){1d.2W(1K,t,v)}K{B(h 1f 14 1K)t.1o(v||1K,1K[1f],1f)}};1d.R.1Q=1d.R.Q;3T.H({1Q:7(2Y,4v){6(($k(2Y)=='1E')?17 3E(2Y,4v):2Y).1Q(5)},2U:7(){6 2g(5,10)},4l:7(){6 3X(5)},3j:7(){6 5.1B(/-/D/g,7(1w){6 1w.3r(1).4u()})},4F:7(){6 5.1B(//w[A-Z]/g,7(1w){6(1w.3r(0)+'-'+1w.3r(1).2z())})},4g:7(){6 5.1B(//b[a-z]/g,7(1w){6 1w.4u()})},4y:7(){6 5.1B(/^/s+|/s+$/g,'')},3F:7(){6 5.1B(//s{2,}/g,' ').4y()},2F:7(N){h 1p=5.1w(//d{1,3}/g);6(1p)?1p.2F(N):T},3x:7(N){h 1U=5.1w(/^#?(/w{1,2})(/w{1,2})(/w{1,2})$/);6(1U)?1U.4z(1).3x(N):T},Q:7(1E,s){6(s)?(s+5+s).22(s+1E+s)>-1:5.22(1E)>-1},6L:7(){6 5.1B(/([.*+?^${}()|[/]])/g,'//$1')}});1d.H({2F:7(N){c(5.E<3)6 T;c(5.E==4&&5[3]==0&&!N)6'6Q';h 1U=[];B(h i=0;i<3;i++){h 25=(5[i]-0).6P(16);1U.1e((25.E==1)?'0'+25:25)}6 N?1U:'#'+1U.1L('')},3x:7(N){c(5.E!=3)6 T;h 1p=[];B(h i=0;i<3;i++){1p.1e(2g((5[i].E==1)?5[i]+5[i]:5[i],16))}6 N?1p:'1p('+1p.1L(',')+')'}});3V.H({1t:7(V){h t=5;V=$2m({'v':t,'o':T,'C':W,'1s':T,'2b':T,'2V':T},V);c($33(V.C)&&$k(V.C)!='N')V.C=[V.C];6 7(o){h G;c(V.o){o=o||r.o;G=[(V.o===18)?o:17 V.o(o)];c(V.C)G.H(V.C)}K G=V.C||C;h 1z=7(){6 t.2k($43(V.v,t),G)};c(V.1s)6 5P(1z,V.1s);c(V.2b)6 5O(1z,V.2b);c(V.2V)3y{6 1z()}3u(5N){6 T};6 1z()}},5Q:7(G,v){6 5.1t({'C':G,'v':v})},2V:7(G,v){6 5.1t({'C':G,'v':v,'2V':18})()},v:7(v,G){6 5.1t({'v':v,'C':G})},5R:7(v,G){6 5.1t({'v':v,'o':18,'C':G})},1s:7(1s,v,G){6 5.1t({'1s':1s,'v':v,'C':G})()},2b:7(4B,v,G){6 5.1t({'2b':4B,'v':v,'C':G})()}});4s.H({2U:7(){6 2g(5)},4l:7(){6 3X(5)},5S:7(1S,23){6 1N.1S(23,1N.23(1S,5))},4j:7(2f){2f=1N.5G(10,2f||0);6 1N.4j(5*2f)/2f},5J:7(t){B(h i=0;i<5;i++)t(i)}});h u=17 1l({26:7(m,U){c($k(m)=='1E'){c(r.1q&&U&&(U.1f||U.k)){h 1f=(U.1f)?' 1f="'+U.1f+'"':'';h k=(U.k)?' k="'+U.k+'"':'';3J U.1f;3J U.k;m='<'+m+1f+k+'>'}m=J.4i(m)}m=$(m);6(!U||!m)?m:m.4p(U)}});h 1V=17 1l({26:7(I){6(I)?$H(I,5):5}});1V.H=7(U){B(h X 14 U){5.R[X]=U[X];5[X]=$1X.36(X)}};7 $(m){c(!m)6 W;c(m.29)6 1b.28(m);c([r,J].Q(m))6 m;h k=$k(m);c(k=='1E'){m=J.5T(m);k=(m)?'19':T}c(k!='19')6 W;c(m.29)6 1b.28(m);c(['1C','6h'].Q(m.4a.2z()))6 m;$H(m,u.R);m.29=7(){};6 1b.28(m)};J.4m=J.2K;7 $$(){h I=[];B(h i=0,j=C.E;i<j;i++){h 24=C[i];1r($k(24)){M'19':I.1e(24);M'6b':1j;M T:1j;M'1E':24=J.4m(24,18);3K:I.H(24)}}6 $$.3U(I)};$$.3U=7(N){h I=[];B(h i=0,l=N.E;i<l;i++){c(N[i].$35)58;h 19=$(N[i]);c(19&&!19.$35){19.$35=18;I.1e(19)}}B(h n=0,d=I.E;n<d;n++)I[n].$35=W;6 17 1V(I)};1V.4q=7(q){6 7(){h G=C;h 3b=[];h I=18;B(h i=0,j=5.E,1z;i<j;i++){1z=5[i][q].2k(5[i],G);c($k(1z)!='19')I=T;3b.1e(1z)};6(I)?$$.3U(3b):3b}};u.H=7(1v){B(h q 14 1v){2q.R[q]=1v[q];u.R[q]=1v[q];u[q]=$1X.36(q);h 4r=(1d.R[q])?q+'1V':q;1V.R[4r]=1V.4q(q)}};u.H({4p:7(U){B(h X 14 U){h 2n=U[X];1r(X){M'65':5.4Y(2n);1j;M'F':c(5.3Q)5.3Q(2n);1j;M'1v':5.44(2n);1j;3K:5.2H(X,2n)}}6 5},21:7(m,4T){m=$(m);1r(4T){M'4h':m.1H.3W(5,m);1j;M'4S':h 2s=m.4M();c(!2s)m.1H.3D(5);K m.1H.3W(5,2s);1j;M'3m':h 3M=m.3z;c(3M){m.3W(5,3M);1j}3K:m.3D(5)}6 5},82:7(m){6 5.21(m,'4h')},85:7(m){6 5.21(m,'4S')},8a:7(m){6 5.21(m,'47')},89:7(m){6 5.21(m,'3m')},88:7(){h I=[];$1m(C,7(4R){I=I.87(4R)});$$(I).21(5);6 5},2r:7(){6 5.1H.4e(5)},7S:7(4Q){h m=$(5.7R(4Q!==T));c(!m.$F)6 m;m.$F={};B(h k 14 5.$F)m.$F[k]={'Y':$A(5.$F[k].Y),'1W':$A(5.$F[k].1W)};6 m.2Q()},7P:7(m){m=$(m);5.1H.7T(m,5);6 m},4f:7(1y){5.3D(J.7Y(1y));6 5},3G:7(12){6 5.12.Q(12,' ')},4V:7(12){c(!5.3G(12))5.12=(5.12+' '+12).3F();6 5},4U:7(12){5.12=5.12.1B(17 3E('(^|//s)'+12+'(?://s|$)'),'$1').3F();6 5},7V:7(12){6 5.3G(12)?5.4U(12):5.4V(12)},4X:7(q,15){1r(q){M'1h':6 5.4W(3X(15));M'8p':q=(r.1q)?'8t':'8v'}q=q.3j();1r($k(15)){M'41':c(!['8w','4I'].Q(q))15+='4n';1j;M'N':15='1p('+15.1L(',')+')'}5.P[q]=15;6 5},4Y:7(1D){1r($k(1D)){M'1C':u.34(5,'4X',1D);1j;M'1E':5.P.3l=1D}6 5},4W:7(1h){c(1h==0){c(5.P.2G!="4P")5.P.2G="4P"}K{c(5.P.2G!="4O")5.P.2G="4O"}c(!5.2E||!5.2E.8m)5.P.4I=1;c(r.1q)5.P.4H=(1h==1)?'':"8j(1h="+1h*8b+")";5.P.1h=5.$1O.1h=1h;6 5},1P:7(q){q=q.3j();h O=5.P[q];c(!$33(O)){c(q=='1h')6 5.$1O.1h;O=[];B(h P 14 u.1Z){c(q==P){u.1Z[P].1m(7(s){h P=5.1P(s);O.1e(2g(P)?P:'5z')},5);c(q=='1M'){h 2D=O.2D(7(25){6(25==O[0])});6(2D)?O[0]:T}6 O.1L(' ')}}c(q.Q('1M')){c(u.1Z.1M.Q(q)){6['5f','7g','7k'].1A(7(p){6 5.1P(q+p)},5).1L(' ')}K c(u.5x.Q(q)){6['5C','51','5D','5B'].1A(7(p){6 5.1P('1M'+p+q.1B('1M',''))},5).1L(' ')}}c(J.4G)O=J.4G.7o(5,W).7n(q.4F());K c(5.2E)O=5.2E[q]}c(r.1q)O=u.4b(q,O,5);c(O&&q.1Q(/3n/i)&&O.Q('1p')){6 O.7e('1p').2T(1,4).1A(7(3n){6 3n.2F()}).1L(' ')}6 O},78:7(){6 u.3k(5,'1P',C)},2i:7(2L,1n){2L+='79';h m=(1n)?5[1n]:5[2L];4J(m&&$k(m)!='19')m=m[2L];6 $(m)},7b:7(){6 5.2i('1J')},4M:7(){6 5.2i('2s')},7q:7(){6 5.2i('2s','3z')},4L:7(){6 5.2i('1J','7F')},7E:7(){6 $(5.1H)},7I:7(){6 $$(5.4Z)},3g:7(m){6!!$A(5.2K('*')).Q(m)},3Z:7(q){h 1x=u.2C[q];c(1x)6 5[1x];h 3P=u.5d[q]||0;c(!r.1q||3P)6 5.7M(q,3P);h 3N=5.7K[q];6(3N)?3N.4d:W},7v:7(q){h 1x=u.2C[q];c(1x)5[1x]='';K 5.7u(q);6 5},7t:7(){6 u.3k(5,'3Z',C)},2H:7(q,15){h 1x=u.2C[q];c(1x)5[1x]=15;K 5.7w(q,15);6 5},44:7(1D){6 u.34(5,'2H',1D)},4c:7(){5.48=$A(C).1L('');6 5},7z:7(1y){h 1I=5.3H();c(['P','20'].Q(1I)){c(r.1q){c(1I=='P')5.45.3l=1y;K c(1I=='20')5.2H('1y',1y);6 5}K{5.4e(5.3z);6 5.4f(1y)}}5[$2A(5.3Y)?'3Y':'49']=1y;6 5},7x:7(){h 1I=5.3H();c(['P','20'].Q(1I)){c(r.1q){c(1I=='P')6 5.45.3l;K c(1I=='20')6 5.3Z('1y')}K{6 5.48}}6($43(5.3Y,5.49))},3H:7(){6 5.4a.2z()},2J:7(){1b.2x(5.2K('*'));6 5.4c('')}});u.4b=7(q,O,19){c($33(2g(O)))6 O;c(['5M','3B'].Q(q)){h 1W=(q=='3B')?['5r','5s']:['3m','47'];h 3f=0;1W.1m(7(15){3f+=19.1P('1M-'+15+'-3B').2U()+19.1P('3q-'+15).2U()});6 19['6X'+q.4g()]-3f+'4n'}K c(q.1Q(/1M(.+)5f|5y|3q/)){6'5z'}6 O};u.1Z={'1M':[],'3q':[],'5y':[]};['5C','51','5D','5B'].1m(7(5w){B(h P 14 u.1Z)u.1Z[P].1e(P+5w)});u.5x=['6f','67','5W'];u.3k=7(m,3a,Y){h O={};$1m(Y,7(1g){O[1g]=m[3a](1g)});6 O};u.34=7(m,3a,3S){B(h 1g 14 3S)m[3a](1g,3S[1g]);6 m};u.2C=17 2d({'5A':'12','B':'61','64':'63','80':'7W','8x':'8k','7d':'7r','7G':'7L','7s':'7A','7y':'7N','15':'15','5u':'5u','5b':'5b','5a':'5a','5c':'5c'});u.5d={'7C':2,'2t':2};u.1F={2v:{1T:7(k,t){c(5.3L)5.3L(k,t,T);K 5.7D('59'+k,t);6 5},5t:7(k,t){c(5.5e)5.5e(k,t,T);K 5.7J('59'+k,t);6 5}}};r.H(u.1F.2v);J.H(u.1F.2v);u.H(u.1F.2v);h 1b={I:[],28:7(m){c(!m.$1O){1b.I.1e(m);m.$1O={'1h':1}}6 m},2x:7(I){B(h i=0,j=I.E,m;i<j;i++){c(!(m=I[i])||!m.$1O)58;c(m.$F)m.2l('2x').2Q();B(h p 14 m.$1O)m.$1O[p]=W;B(h d 14 u.R)m[d]=W;1b.I[1b.I.22(m)]=W;m.29=m.$1O=m=W}1b.I.2r(W)},2J:7(){1b.28(r);1b.28(J);1b.2x(1b.I)}};r.1T('5m',7(){r.1T('3s',1b.2J);c(r.1q)r.1T('3s',7c)});h 1k=17 1l({26:7(o){c(o&&o.$53)6 o;5.$53=18;o=o||r.o;5.o=o;5.k=o.k;5.1Y=o.1Y||o.74;c(5.1Y.3h==3)5.1Y=5.1Y.1H;5.75=o.77;5.7f=o.7m;5.7p=o.7l;5.7h=o.7i;c(['3t','2Z'].Q(5.k)){5.7O=(o.52)?o.52/8l:-(o.8i||0)/3}K c(5.k.Q('1g')){5.2y=o.57||o.8h;B(h 1f 14 1k.Y){c(1k.Y[1f]==5.2y){5.1g=1f;1j}}c(5.k=='5k'){h 2B=5.2y-8d;c(2B>0&&2B<13)5.1g='f'+2B}5.1g=5.1g||3T.8f(5.2y).2z()}K c(5.k.1Q(/(5j|8g|8n)/)){5.8o={'x':o.3O||o.55+J.54.8u,'y':o.3C||o.5v+J.54.8q};5.8r={'x':o.3O?o.3O-r.8c:o.55,'y':o.3C?o.3C-r.7U:o.5v};5.7Z=(o.57==3)||(o.86==2);1r(5.k){M'3p':5.1a=o.1a||o.83;1j;M'3o':5.1a=o.1a||o.84}5.5g()}6 5},73:7(){6 5.2w().2u()},2w:7(){c(5.o.2w)5.o.2w();K 5.o.6N=18;6 5},2u:7(){c(5.o.2u)5.o.2u();K 5.o.62=T;6 5}});1k.3c={1a:7(){c(5.1a&&5.1a.3h==3)5.1a=5.1a.1H},5q:7(){3y{1k.3c.1a.1o(5)}3u(e){5.1a=5.1Y}}};1k.R.5g=(r.3w)?1k.3c.5q:1k.3c.1a;1k.Y=17 2d({'60':13,'5X':38,'5Z':40,'5r':37,'5s':39,'6d':27,'6a':32,'5E':8,'5L':9,'3J':46});u.1F.1G={31:7(k,t){5.$F=5.$F||{};5.$F[k]=5.$F[k]||{'Y':[],'1W':[]};c(5.$F[k].Y.Q(t))6 5;5.$F[k].Y.1e(t);h 2S=k;h 1c=u.1G[k];c(1c){c(1c.3A)1c.3A.1o(5,t);c(1c.1A)t=1c.1A;c(1c.k)2S=1c.k}c(!5.3L)t=t.1t({'v':5,'o':18});5.$F[k].1W.1e(t);6(u.3v.Q(2S))?5.1T(2S,t):5},5o:7(k,t){c(!5.$F||!5.$F[k])6 5;h 2R=5.$F[k].Y.22(t);c(2R==-1)6 5;h 1g=5.$F[k].Y.2T(2R,1)[0];h 15=5.$F[k].1W.2T(2R,1)[0];h 1c=u.1G[k];c(1c){c(1c.2r)1c.2r.1o(5,t);c(1c.k)k=1c.k}6(u.3v.Q(k))?5.5t(k,15):5},3Q:7(1D){6 u.34(5,'31',1D)},2Q:7(k){c(!5.$F)6 5;c(!k){B(h 2P 14 5.$F)5.2Q(2P);5.$F=W}K c(5.$F[k]){5.$F[k].Y.1m(7(t){5.5o(k,t)},5);5.$F[k]=W}6 5},2l:7(k,G,1s){c(5.$F&&5.$F[k]){5.$F[k].Y.1m(7(t){t.1t({'v':5,'1s':1s,'C':G})()},5)}6 5},5n:7(1i,k){c(!1i.$F)6 5;c(!k){B(h 2P 14 1i.$F)5.5n(1i,2P)}K c(1i.$F[k]){1i.$F[k].Y.1m(7(t){5.31(k,t)},5)}6 5}};r.H(u.1F.1G);J.H(u.1F.1G);u.H(u.1F.1G);u.1G=17 2d({'5i':{k:'3p',1A:7(o){o=17 1k(o);c(o.1a!=5&&!5.3g(o.1a))5.2l('5i',o)}},'5h':{k:'3o',1A:7(o){o=17 1k(o);c(o.1a!=5&&!5.3g(o.1a))5.2l('5h',o)}},'2Z':{k:(r.3w)?'3t':'2Z'}});u.3v=['5j','6i','6O','6H','2Z','3t','3p','3o','6J','5k','6K','70','56','3s','5m','6T','6U','6V','6W','6G','6F','6q','6r','6s','6n','6j','6l'];3V.H({6m:7(v,G){6 5.1t({'v':v,'C':G,'o':1k})}});u.1G.3i={3A:7(t){c(r.30){t.1o(5);6}h 2o=7(){c(r.30)6;r.30=18;r.2a=$5l(r.2a);5.2l('3i')}.v(5);c(J.2I&&r.2j){r.2a=7(){c(['30','5p'].Q(J.2I))2o()}.2b(50)}K c(J.2I&&r.1q){c(!$('42')){h 2t=(r.6u.6B=='6D:')?'://0':'6E:6A(0)';J.6x('<20 6z="42" 6R 2t="'+2t+'"><//20>');$('42').5K=7(){c(5.2I=='5p')2o()}}}K{r.1T("56",2o);J.1T("81",2o)}}};r.7X=7(t){6 5.31('3i',t)}; ' , 62 , 530 , ' |||||this|return|function|||||if|||||var|||type||el||event||property|window||fn|Element|bind||||||for|arguments||length|events|args|extend|elements|document|else|obj|case|array|result|style|contains|prototype||false|props|options|null|prop|keys||||className||in|value||new|true|element|relatedTarget|Garbage|custom|Array|push|name|key|opacity|from|break|Event|Class|each|start|call|rgb|ie|switch|delay|create|item|properties|match|index|text|returns|map|replace|object|source|string|Methods|Events|parentNode|tag|previous|iterable|join|border|Math|tmp|getStyle|test|current|min|addListener|hex|Elements|values|native|target|Styles|script|inject|indexOf|max|selector|bit|initialize||collect|htmlElement|timer|periodical|len|Abstract|results|precision|parseInt|mix|walk|webkit|apply|fireEvent|merge|val|domReady|klass|HTMLElement|remove|next|src|preventDefault|Listeners|stopPropagation|trash|code|toLowerCase|defined|fKey|Properties|every|currentStyle|rgbToHex|visibility|setProperty|readyState|empty|getElementsByTagName|brother|ap|proto|mp|evType|removeEvents|pos|realType|splice|toInt|attempt|forEach|typeof|regex|mousewheel|loaded|addEvent||chk|setMany|included|generic||||method|items|fix|random|parent|size|hasChild|nodeType|domready|camelCase|getMany|cssText|top|color|mouseout|mouseover|padding|charAt|unload|DOMMouseScroll|catch|NativeEvents|gecko|hexToRgb|try|firstChild|add|width|pageY|appendChild|RegExp|clean|hasClass|getTag|merged|delete|default|addEventListener|first|node|pageX|flag|addEvents|newArray|pairs|String|unique|Function|insertBefore|parseFloat|innerText|getProperty||number|ie_ready|pick|setProperties|styleSheet||bottom|innerHTML|textContent|tagName|fixStyle|setHTML|nodeValue|removeChild|appendText|capitalize|before|createElement|round|constructor|toFloat|getElementsBySelector|px|ie6|set|Multi|elementsProperty|Number|pp|toUpperCase|params|copy|include|trim|slice|Merge|interval|callee|undefined|xpath|hyphenate|defaultView|filter|zoom|while|head|getLast|getNext|picked|visible|hidden|contents|argument|after|where|removeClass|addClass|setOpacity|setStyle|setStyles|childNodes||Right|wheelDelta|extended|documentElement|clientX|load|which|continue|on|multiple|checked|selected|PropertiesIFlag|removeEventListener|Width|fixRelatedTarget|mouseleave|mouseenter|click|keydown|clear|beforeunload|cloneEvents|removeEvent|complete|relatedTargetGecko|left|right|removeListener|disabled|clientY|direction|borderShort|margin|0px|class|Left|Top|Bottom|backspace|ActiveXObject|pow|evaluate|XMLHttpRequest|times|onreadystatechange|tab|height|err|setInterval|setTimeout|pass|bindAsEventListener|limit|getElementById|ie7|Document|borderColor|up|floor|down|enter|htmlFor|returnValue|colSpan|colspan|styles|time|borderStyle|clearInterval|Window|space|boolean|clearTimeout|esc|Date|borderWidth|getTime|embed|dblclick|contextmenu|some|scroll|bindWithEvent|abort|associate|getRandom|reset|select|error|Object|location|BackgroundImageCache|execCommand|write|DOMElement|id|void|protocol|implement|https|javascript|submit|change|mousedown|taintEnabled|mousemove|keypress|escapeRegExp|navigator|cancelBubble|mouseup|toString|transparent|defer|webkit420|resize|move|focus|blur|offset|khtml|webkit419|keyup|getBoxObjectFor|all|stop|srcElement|shift|textnode|shiftKey|getStyles|Sibling|nodeName|getPrevious|CollectGarbage|tabindex|split|control|Style|meta|metaKey|whitespace|Color|altKey|ctrlKey|getPropertyValue|getComputedStyle|alt|getFirst|tabIndex|readonly|getProperties|removeAttribute|removeProperty|setAttribute|getText|frameborder|setText|readOnly|MooTools|href|attachEvent|getParent|lastChild|maxlength|version|getChildren|detachEvent|attributes|maxLength|getAttribute|frameBorder|wheel|replaceWith|iframe|cloneNode|clone|replaceChild|pageYOffset|toggleClass|rowSpan|onDomReady|createTextNode|rightClick|rowspan|DOMContentLoaded|injectBefore|fromElement|toElement|injectAfter|button|concat|adopt|injectTop|injectInside|100|pageXOffset|111|regexp|fromCharCode|mouse|keyCode|detail|alpha|accessKey|120|hasLayout|menu|page|float|scrollTop|client|collection|styleFloat|scrollLeft|cssFloat|zIndex|accesskey ' .split( ' | ' ), 0 , {} ))

demo.html:

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >
< title > Mootools 3D Carousel </ title >


< style >

    #carousel
{
        background-color
:#000000;
        width
:700px;
        height
:400px;
        position
:relative;
        border
:1px solid #FFFFFF;
        
    
}

    
    img
{
        width
:100%;
        height
:auto;
        border
:0px solid #FFFFFF;
        display
:block;
    
}

    
</ style >

< script  src ="js/mootools.js"  type ="text/javascript" ></ script >
< script  src ="js/3dcarousel.js"  type ="text/javascript" ></ script >

</ head >

< body >


< div  id ="carousel" >
    
< div >< href ="#" >< img  src ="images/dreamweaver.png"   /></ a ></ div >
    
    
< div >< href ="#" >< img  src ="images/director.png"   /></ a ></ div >
    
    
< div >< href ="#" >< img  src ="images/flash.png"   /></ a ></ div >
    
    
< div >< href ="#" >< img  src ="images/freehand.png"   /></ a ></ div >
    
    
< div >< href ="#" >< img  src ="images/swf-player.png"   /></ a ></ div >
    
    
< div >< href ="#" >< img  src ="images/coldfusion.png"   /></ a ></ div >

</ div >


</ body >
</ html >

 

图片如下:

大家自己运行一下代码,看看效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值