JavaScript完成简单的对联广告

梦里梦外; 2021-06-10 20:41 567阅读 0赞

非常简单的使用方法，只需在需要加入广告的页面引入一个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.scrollTop
    	else { /*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)' οnclick='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)' οnclick='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>

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

![Center][]

[Center]: /images/20210522/e1e06d8ed22b4a618f447eb8f94468b3.png