JavaScript完成简单的对联广告

来源：互联网发布：淘宝网迅雷下载编辑：程序博客网时间：2024/05/17 04:20

非常简单的使用方法，只需在需要加入广告的页面引入一个js文件即可。

javascript文件（ad.js）如下:

lastScrollY = 0;//左边的广告var leftAd = "<script type='text/javascript'>var cpro_id = 'u1313772';</script><script src='http://cpro.baidustatic.com/cpro/ui/c.js' type='text/javascript'></script>";//右边的广告var rightAd = "<script type='text/javascript'>var cpro_id = 'u1313772';</script><script src='http://cpro.baidustatic.com/cpro/ui/c.js' type='text/javascript'></script>";function heartBeat() {var diffY;if (document.documentElement && document.documentElement.scrollTop)diffY = document.documentElement.scrollTop;else if (document.body)diffY = document.body.scrollTopelse { /*Netscape stuff*/ }//alert(diffY);percent = .1 * (diffY - lastScrollY);if (percent > 0) percent = Math.ceil(percent);else percent = Math.floor(percent);document.getElementById("LeftAd").style.top = parseInt(document.getElementById("LeftAd").style.top) + percent + "px";document.getElementById("RightAd").style.top = parseInt(document.getElementById("LeftAd").style.top) + percent + "px";lastScrollY = lastScrollY + percent;//alert(lastScrollY);}suspendcode12 = "<DIV id=LeftAd style='left:5px;POSITION:absolute;TOP:80px;'>" + leftAd +"<a style='text-align:left; cursor: hand; display:block; background:#eee; width:100px;' href='javascript:void(0)' onclick='javascript:ClosedivLeft()' hidefocus='true'>关闭</a></div>"suspendcode14 = "<DIV id=RightAd style='right:5px;POSITION:absolute;TOP:80px;'>" + rightAd + "<a style='text-align:left; cursor: hand; display:block; background:#eee; width:100px;' href='javascript:void(0)' onclick='javascript:ClosedivRight()' hidefocus='true'>关闭</a></div>"document.write(suspendcode12);document.write(suspendcode14);window.setInterval("heartBeat()", 1);function ClosedivLeft() {LeftAd.style.visibility = "hidden";}function ClosedivRight() {RightAd.style.visibility = "hidden";}

其中变量leftAd和rightAd可以自定义修改，分别为左边的广告和右边的广告。

要显示广告的html页面只需要加载上面的js即可，不用再做其它的了。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/ad.js" ></script></head><body></body></html>

效果如下，广告的长度和宽度可以自定义，这里随便用一个了。

0 0