32、图片魔幻变化 代码2

32、图片魔幻变化  代码2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>特效演示</TITLE>

<META http-equiv=Content-Type content="text/html; charset=gb2312">

<META content="MSHTML 6.00.2900.2144" name=GENERATOR></HEAD>

<BODY></EMBED>

 <STYLE type=text/css>BODY {

       PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #000; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 100%; CURSOR: crosshair; PADDING-TOP: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 100%; zIndex: -2

}

IMG {

       BORDER-RIGHT: #222 1px solid; BORDER-TOP: #222 1px solid; LEFT: -10000px; BORDER-LEFT: #222 1px solid; CURSOR: pointer; BORDER-BOTTOM: #222 1px solid; POSITION: absolute

}

</STYLE><SCRIPT type=text/javascript>

window.onerror = new Function("return true");

screen.bufferDepth = 16;

object = new Array();

////////////////////

am = 40;

TEMPO = 5000;

///////////////////

W0 = 0;

H0 = 0;

nx = 0;

ny = 0;

K  = 0;

Kb = -1;

 

function zoomIn(N){

       object[N].img.cursor="crosshair";

       object[N].zoomIn();

       object[N].img.zIndex=0;

}

 

function zoomOut(N){

       object[N].img.cursor="pointer";

       object[N].zoomOut();

}

 

function zyva(N){

       if(N!=Kb){

              clearTimeout(object[Kb].TO);

              zoomIn(N);

              object[Kb].BR=true;

              zoomOut(Kb);

              Kb=N;

       }

}

 

function nextImg(){

       if(Kb>=0)zoomOut(Kb);

       Kb=K%nbI;

       zoomIn(Kb);

       K++;

}

 

function CObj(N,img){

       this.A   = Math.round(Math.random()*10)+1;

       this.B   = Math.round(Math.random()*10)+3;

       this.k   = 0.1 * N;

       this.L   = 0;

       this.T   = 0;

       this.W   = W0;

       this.H   = H0;

       this.xb  = 0;

       this.img = img.style;

       this.img.zIndex = 1;

       this.obj = "object["+N+"].";

       this.BR  = false;

       this.TO  = 0;

 

       this.mainloop = function () {

              with (this) {

                     k += 0.001;

                     L  = ((nx-W) * .5) + (Math.cos(k * A) * .5) * (nx - W);

                     T  = ((ny-H) * .5) + (Math.cos(k * B) * .5) * (ny - H);

                     with(img){

                            width  = Math.floor(W);

                            height = Math.floor(H);

                            top    = Math.floor(T);

                            left   = Math.floor(L);

                     }

                     setTimeout(obj+"mainloop();", 32);

              }

       }

      

       this.zoomIn  = function() {

              with (this) {

                     W += (nx - W) * (.1 * am/(.01+(nx - W)));

                     H += (ny - H) * (.1 * am/(.01+(nx - W)));

                     if(!BR){

                            if(W >= nx) TO=setTimeout("nextImg();", TEMPO);

                            else setTimeout(obj+"zoomIn();", 32);

                     }

              }

       }

      

       this.zoomOut  = function() {

              with (this) {

                     W -= W / (am * .5);

                     H -= H / (am * .5);

                     if(W >= 2) setTimeout(obj+"zoomOut();", 32);

                     else {

                            BR=false;

                            img.zIndex=1;

                            zoomStart();

                     }

              }

       }

       this.zoomStart = function() {

              with (this) {

                     W++;

                     H += H0 / W0;

                     if(W<W0 || H<H0)setTimeout(obj+"zoomStart();", 32);

              }

       }

      

       this.mainloop();

}

 

function resize() {

       nx = document.body.clientWidth;

       ny = document.body.clientHeight;

       W0  = nx / nbI;

       H0  = ny / nbI;

       if(H0<W0*.56)H0=W0*.56;

}

onresize = resize;

 

onload = function() {

       img = document.getElementById("IMG").getElementsByTagName("img");

       nbI = img.length;

       resize();

       for(i=0;i<nbI;i++) object[i] = new CObj(i,img[i]);

       nextImg();

}

//-->

</SCRIPT><BGSOUND src="" loop=infinite><DIV id=IMG style="Z-INDEX: 1"><IMG onclick=zyva(0) src="sto/1.jpg">

<IMG onclick=zyva(1) src="sto/2.jpg"> <IMG onclick=zyva(2)

src="sto/3.jpg"> <IMG onclick=zyva(3) src="sto/4.jpg"> <IMG

onclick=zyva(4) src="sto/5.jpg"> <IMG onclick=zyva(5)

src="sto/6.jpg"> <IMG onclick=zyva(6) src="sto/7.jpg">

</DIV><SPAN id=LB0 style="LEFT: 50%; POSITION: absolute; TOP: 50%"><SPAN

style="FONT-SIZE: 10px; LEFT: -50px; COLOR: #ffffff; FONT-FAMILY: arial; POSITION: absolute; TOP: -18px">Loading...</SPAN>

<SPAN

style="FONT-SIZE: 1px; BACKGROUND: #333; LEFT: -50px; WIDTH: 100px; POSITION: absolute; TOP: -5px; HEIGHT: 10px"><SPAN

id=LB1

style="FONT-SIZE: 1px; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 10px"></SPAN></SPAN></SPAN>

<SCRIPT>m00=document.getElementById("IMG").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100);if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</SCRIPT>

</BODY></HTML>

 

Write a comment

Comments: 0