首頁 > 其他

js漂浮廣告實現代碼_javascript技巧

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了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); }}

運行效果圖：

 此特效包含的檔案：

希望本文所述對大家的javascript程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More