js漂浮广告实现代码

前端技术 2023/09/06 JavaScript

本文实例讲述了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\" 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);
 }
}

运行效果图：

 此特效包含的文件：

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/16952

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案