js floating ad implementation code_javascript skills-JS Tutorial-php.cn

js floating ad implementation code_javascript skills

WBOY

Release： 2016-05-16 15:45:03

Original

1265 people have browsed it

The example in this article describes how to implement floating ads in js. Share it with everyone for your reference. The details are as follows:

The specific code is as follows:

<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" 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>

Copy after login

moveobj.js:

var vmin=2;
var vmax=5;
var vr=2;
var timer1;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")&#63; 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);
 }
}

Copy after login

Operation rendering:

Files included in this effect:

I hope this article will be helpful to everyone’s JavaScript programming design.