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程序設(shè)計有所幫助。
您可能感興趣的文章:
- 用javascript實現(xiàn)的仿Flash廣告圖片輪換效果
- 對聯(lián)廣告js flash激活
- 基于javascript實現(xiàn)全屏漂浮廣告
- JavaScript仿商城實現(xiàn)圖片廣告輪播實例代碼
- JS實現(xiàn)可關(guān)閉的對聯(lián)廣告效果代碼
- JavaScript實現(xiàn)的多個圖片廣告交替顯示效果代碼
- js實現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動廣告條代碼
- js實現(xiàn)拉幕效果的廣告代碼
- JS實現(xiàn)彈性漂浮效果的廣告代碼
- flash+jQuery實現(xiàn)可關(guān)閉及重復(fù)播放的壓頂廣告
- 基于jQuery的仿flash的廣告輪播
- js+flash實現(xiàn)的5圖變換效果廣告代碼(附演示與demo源碼下載)
相關(guān)文章
利用javascript的面向?qū)ο蟮奶匦詫崿F(xiàn)限制試用期
Javascript是一種面向?qū)ο蟮哪_本語言,其也具有面向?qū)ο蟮娜筇匦裕墙裉煳覀儾辉敿毜闹v解javascript的面向?qū)ο筇匦?,今天我們簡單的了解一下javascript的面向?qū)ο筇匦?,然后學(xué)習(xí)一下怎樣實現(xiàn)試用期的限制!2011-08-08layui實現(xiàn)tab的添加拒絕重復(fù)的方法
今天小編就為大家分享一篇layui實現(xiàn)tab的添加拒絕重復(fù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實現(xiàn)解析
這篇文章主要介紹了微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實現(xiàn)解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08js 實現(xiàn)打印網(wǎng)頁中定義的部分內(nèi)容的代碼
有時候頁面需要打印功能,如果再做一個頁面不利于優(yōu)化,兩個頁面內(nèi)容一樣了,所以可以用js實現(xiàn)內(nèi)容的打印不需要的就不打印。2010-04-04