Javascript添加网页浮动图片广告

最新推荐文章于 2022-03-27 22:39:30 发布

原创最新推荐文章于 2022-03-27 22:39:30 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #border #delay #internet #date

PHP服务器日志专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页上浮动广告的方法。通过设置元素的位置属性，并利用定时器不断更新这些位置来达到广告自动移动的效果。同时介绍了如何根据不同浏览器进行兼容性处理。

首先在<body></body>间加入如下JavaScript代码：

<SCRIPT LANGUAGE="JavaScript">  </script> <mce:script language="JavaScript" src="ad.js" mce_src="ad.js"></mce:script>

然后新建一个ad.js的JavaScript文件输入如下代码：

//init cookie function setCookie() { var FromUrl=window.location.toString(); FromUrl=FromUrl.replace("http://",""); FromUrl=FromUrl.replace("www.",""); FromUrl=FromUrl.substring(0,FromUrl.indexOf("/")); var now=new Date(); //set cookie expires date 1000ms*60*60 now.setTime( now.getTime() + 1000 * 60 * 60 ); var the_cookie = "FromUrl="+FromUrl+";expires="+now.toGMTString()+";path=/"; document.cookie = the_cookie;//write Cookie } function readCookie() { var the_cookie = document.cookie; return the_cookie; } setCookie(); //end of init cookie var brOK=false; var mie=false; var vmin=2; var vmax=5; var vr=3; var timer1; var nowads; var ad_width=0; var ad_height=0; function movechip(chipname) { if(brOK) { eval("chip="+chipname); if(!mie) { pageX=window.pageXOffset; pageW=window.innerWidth; pageY=window.pageYOffset; pageH=window.innerHeight; } else { pageX=window.document.body.scrollLeft; pageW=window.document.body.offsetWidth-8; pageY=window.document.body.scrollTop; pageH=window.document.body.offsetHeight; } 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.xx>=pageW-ad_width) { chip.xx=chip.xx-20; chip.vx=-vmin-vmax*Math.random(); } if(chip.yy<=pageY) { chip.yy=pageY; chip.vy=vmin+vmax*Math.random(); } if(chip.yy>=pageY+pageH-ad_height) { chip.yy=pageY+pageH-ad_height; chip.vy=-vmin-vmax*Math.random(); } if(!mie) { eval('document.'+chip.named+'.top ='+chip.yy); eval('document.'+chip.named+'.left='+chip.xx); } else { eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx); eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy); } chip.timer1=setTimeout("movechip('"+chip.named+"')",100); } } function stopme(chipname) { if(brOK) { eval("chip="+chipname); if(chip.timer1!=null) { clearTimeout(chip.timer1) } } } function nowads() { if(navigator.appName.indexOf("Internet Explorer")!=-1) { if(parseInt(navigator.appVersion.substring(0,1))>=4) brOK=navigator.javaEnabled();mie=true; } if(navigator.appName.indexOf("Netscape")!=-1) { if(parseInt(navigator.appVersion.substring(0,1))>=4) brOK=navigator.javaEnabled(); } nowads.named="nowads"; nowads.vx=vmin+vmax*Math.random(); nowads.vy=vmin+vmax*Math.random(); nowads.w=1; nowads.h=1; nowads.xx=0; nowads.yy=0; ad_width=nowads_img.width; ad_height=nowads_img.height; //alert(ad_height); nowads.timer1=null; movechip("nowads"); } function getClientSize() { pageW=window.document.body.offsetWidth-8; pageH=window.document.body.offsetHeight; } document.write('<div id="nowads" style="height:50px;left:150px;position:absolute;top:1237px;width:220px; z-index:100000">'); //广告0 //document.write('<a href="http://yjsy.nenu.edu.cn/zhaosheng/mark.php?flag=bs" mce_href="http://yjsy.nenu.edu.cn/zhaosheng/mark.php?flag=bs" target="_blank" onmouseover=stopme("nowads"); onmouseout=movechip("nowads");>'); //document.write('<img id=nowads_img src="ad0.gif" mce_src="ad0.gif" border=0></a></div>'); //广告0 //广告1 document.write('<a href="http://www.acgs.pku.edu.cn/forum.html " mce_href="http://www.acgs.pku.edu.cn/forum.html " target="_blank" onmouseover=stopme("nowads"); onmouseout=movechip("nowads");>'); document.write('<img id=nowads_img src="ad1.gif" mce_src="ad1.gif" border=0></a></div>'); //广告1 nowads(); window.onresize=getClientSize;

document.write('<a href="http://www.acgs.pku.edu.cn/forum.html " target="_blank" onmouseover=stopme("nowads"); onmouseout=movechip("nowads");>');
document.write('<img id=nowads_img src=ad1.gif border=0></a></div>');

分别是链接的地址和漂浮的图片地址

最后添加一个ad1.gif就OK了