js漂浮廣告實現代碼

2019-11-20 11:49:17

字體：大中小

來源：轉載

供稿：網友

本文實例講述了js實現漂浮廣告的方法。分享給大家供大家參考。具體如下：

具體代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="moveobj.js"> </script><script type="text/javascript">var flyimage1, flyimage2, flyimage3function pagestart(){ flyimage1=new Chip("flyimage1",47,68); flyimage2=new Chip("flyimage2",47,68); flyimage3=new Chip("flyimage3",47,68);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></head><body><DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;"><A><IMG SRC="img/1.gif" BORDER=0></a></DIV><DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;"><A><IMG SRC="img/2.gif" BORDER=0></a></DIV><DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;"><A><IMG SRC="img/3.gif" BORDER=0></a></DIV></body></html>

moveobj.js：

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); }}

運行效果圖：