到邊界反彈的漂浮圖片JS代碼怎么寫

2012/11/8 15:24:00作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

到邊界反彈的漂浮圖片JS代碼怎么寫

【實例描述】

很多網(wǎng)站的圖片廣告是以漂浮的形式展現(xiàn)，當(dāng)圖片漂浮到邊界時會被彈回，然后繼續(xù)向反方向移動。本例學(xué)習(xí)如何實現(xiàn)圖片的反彈。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無標(biāo)題頁-學(xué)無憂（www.wangbatian.cn）</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); 
//設(shè)置定時器
  }
}
//終止圖片的循環(huán)漂浮
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>

【運行效果】

到邊界反彈的漂浮圖片運行效果

【難點剖析】

本例的難點是隨機移動的像素值和邊界值的判斷。在設(shè)置隨機數(shù)時，本例使用了“Math．random（）”，其中“Math”是JavaScript的常用計算對象，“random”用來生成一個隨機數(shù)。頁面邊界值的獲取是通過body的相關(guān)屬性，如“scro11Left”是獲取最左側(cè)的坐標(biāo)。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點擊：到邊界反彈的漂浮圖片JS代碼進(jìn)行本實例源碼下載

標(biāo)簽： JS代碼圖片