本文实例讲述了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, flyimage3 function 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"> <A><IMG SRC="img/1.gif" BORDER=0></a> </DIV> <DIV ID="flyimage2"> <A><IMG SRC="img/2.gif" BORDER=0></a> </DIV> <DIV ID="flyimage3"> <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); } }
运行效果图：
此特效包含的文件：
希望本文所述对大家的javascript程序设计有所帮助。