196、自由浮动图像特效

196、自由浮动图像特效

1  把如下代码复制到<head></head>之间

 

<script type="text/javascript">/***********************************************

* Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)

* Modified by Dynamic Drive for various improvements

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

 

 

var vmin=2;

var vmax=5;

var vr=2;

var timer1;

 

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

 

function Chip(chipname,width,height){

 this.named=chipname;

 this.vx=vmin+vmax*Math.random();

 this.vy=vmin+vmax*Math.random();

 this.w=width+20;

 this.h=height;

 this.xx=0;

 this.yy=0;

 this.timer1=null;

}

 

function movechip(chipname){

if (document.getElementById){

eval("chip="+chipname);

   if (window.innerWidth || window.opera){

               pageX=window.pageXOffset;

     pageW=window.innerWidth-40;

     pageY=window.pageYOffset;

     pageH=window.innerHeight-20;

    }

   else if (document.body){

               pageX=iecompattest().scrollLeft;

     pageW=iecompattest().offsetWidth-40;

     pageY=iecompattest().scrollTop;

     pageH=iecompattest().offsetHeight-20;

    }

 

   chip.xx=chip.xx+chip.vx;

   chip.yy=chip.yy+chip.vy;

  

   chip.vx+=vr*(Math.random()-0.5);

   chip.vy+=vr*(Math.random()-0.5);

   if(chip.vx>(vmax+vmin))  chip.vx=(vmax+vmin)*2-chip.vx;

   if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;

   if(chip.vy>(vmax+vmin))  chip.vy=(vmax+vmin)*2-chip.vy;

   if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;

 

   if(chip.xx<=pageX){

                     chip.xx=pageX;

      chip.vx=vmin+vmax*Math.random();

     }

   if(chip.xx>=pageX+pageW-chip.w){

                     chip.xx=pageX+pageW-chip.w;

      chip.vx=-vmin-vmax*Math.random();

     }

   if(chip.yy<=pageY)

     {chip.yy=pageY;

      chip.vy=vmin+vmax*Math.random();

     }

   if(chip.yy>=pageY+pageH-chip.h)

     {chip.yy=pageY+pageH-chip.h;

      chip.vy=-vmin-vmax*Math.random();

     }

 

document.getElementById(chip.named).style.left=chip.xx+"px";

document.getElementById(chip.named).style.top=chip.yy+"px";

 

 

   chip.timer1=setTimeout("movechip('"+chip.named+"')",100);

  }

}

</script>

<script type="text/javascript">

 

 

//Step 1: Define unique variable names depending on number of flying images (ie:3):

var flyimage1, flyimage2, flyimage3

 

function pagestart(){

//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):

 flyimage1=new Chip("flyimage1",47,68);

 flyimage2=new Chip("flyimage2",47,68);

 flyimage3=new Chip("flyimage3",47,68);

 

 

//Step 3: Using the same variable names as 1), add or delete more of the below lines:

movechip("flyimage1");

movechip("flyimage2");

movechip("flyimage3");

 

}

 

if (window.addEventListener)

window.addEventListener("load", pagestart, false)

else if (window.attachEvent)

window.attachEvent("onload", pagestart)

else if (document.getElementById)

window.onload=pagestart

 

</script>

 

2

把如下代码复制到<body></body>之间

 

<!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above -->

<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;">

<A HREF="http://www.7stk.com"><IMG SRC="float/ballon2.gif" BORDER=0></a>

</DIV>

 

<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;">

<A HREF="http://www.7stk.com"><IMG SRC="float/ballon3.gif" BORDER=0></a>

</DIV>

 

<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;">

<A HREF="http://www.7stk.com"><IMG SRC="float/ballon4.gif" BORDER=0></a>

</DIV>

 

Write a comment

Comments: 0