js漂浮廣告實現(xiàn)代碼

更新時間：2015年08月15日 11:55:48 投稿：lijiao

js漂浮廣告實現(xiàn)代碼，本質(zhì)上就是一個來回滾動的小圖片，也是一種廣告形式，需要的朋友可以收藏下

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

具體代碼如下：

<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程序設計有所幫助。

您可能感興趣的文章:

在JavaScript中驗證URL的新方法(2023版)
在JavaScript領域,URL 驗證方面有了新消息！多年來,人們一直在討論JavaScript沒有一種簡便的方法來驗證 URL,現(xiàn)在有了一種新方法URL.canParse(),需要的朋友可以參考下
2023-09-09
JavaScript Event學習第四章傳統(tǒng)的事件注冊模型
在這一章我會講解給元素注冊事件的最好的一種辦法，那就是：確保一個特定的事件在特定的HTML元素上發(fā)生并且能運行特定的腳本。
2010-02-02
JavaScript圖片處理與合成總結(jié)
這篇文章主要介紹了JavaScript圖片處理與合成的相關知識點以及相關實例代碼分析，有興趣的朋友學習下。
2018-03-03
js實現(xiàn)隨機數(shù)小游戲
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機數(shù)小游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
(function(){})()的用法與優(yōu)點
(function(){})()的用法與優(yōu)點...
2007-03-03
今天小編就為大家分享一篇layui type2 通過url給iframe子頁面?zhèn)髦档睦?，具有的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09