到边界反弹的漂浮图片JS代码怎么写

2012/11/8 15:24:00作者：佚名来源：网络

移动端

【实例名称】

到边界反弹的漂浮图片JS代码怎么写

【实例描述】

很多网站的图片广告是以漂浮的形式展现，当图片漂浮到边界时会被弹回，然后继续向反方向移动。本例学习如何实现图片的反弹。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页-学无忧（www.xue51.com）</title>
<SCRIPT language=JavaScript>
var brOK=false;
var mie=false;
var aver=parseInt(navigator.appVersion.substring(0,1));
var aname=navigator.appName;
//检测浏览器类型
function checkbrOK()
{
  if(aname.indexOf("Internet Explorer")!=-1)
   {if(aver>=4) brOK=navigator.javaEnabled();
    mie=true;
   }
  if(aname.indexOf("Netscape")!=-1)  
   {if(aver>=4) brOK=navigator.javaEnabled();}
}
var vmin=2;
var vmax=5;
var vr=2;
var timer1;
function Chip(chipname,width,height)
{this.named=chipname;
 this.vx=vmin+vmax*Math.random();
 this.vy=vmin+vmax*Math.random();
 this.w=width;
 this.h=height;
 this.xx=0;
 this.yy=0;
 this.timer1=null;
}
//移动图像  
function movechip(chipname)
{
 if(brOK)
  {eval("chip="+chipname);
   if(!mie)
    {pageX=window.pageXOffset;
     pageW=window.innerWidth;
     pageY=window.pageYOffset;
     pageH=window.innerHeight;
    }
   else
    {pageX=window.document.body.scrollLeft;
     pageW=window.document.body.offsetWidth-8;
     pageY=window.document.body.scrollTop;
     pageH=window.document.body.offsetHeight;
    } 
   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();
     }
   if(!mie)
      {eval('document.'+chip.named+'.top ='+chip.yy);
       eval('document.'+chip.named+'.left='+chip.xx);
      } 
   else
{eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx);
eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy); 
      }
   chip.timer1=setTimeout("movechip('"+chip.named+"')",100); 
//设置定时器
  }
}
//终止图片的循环漂浮
function stopme(chipname)
{
  if(brOK)
  {
   eval("chip="+chipname);
   if(chip.timer1!=null)
    {clearTimeout(chip.timer1)}
  }
}
var moveimg;
function beginmove()
{
  checkbrOK(); 
  moveimg=new Chip("moveimg",120,150);
  if(brOK) 
   { movechip("moveimg");}
}
</SCRIPT>
需要在body中添加一个ID为“moveimg”的div，其中包含要漂浮的图片，
代码如下所示:
</head>
<body onload="beginmove()">
<p> <DIV id="moveimg" style="POSITION: absolute">
<img border="0" src="LOGO1.gif" width="100" height="100"></p>
</body>
</html>

【运行效果】

到边界反弹的漂浮图片运行效果