JavaScript完成简单的对联广告

最新推荐文章于 2022-11-16 18:31:21 发布

天南韩立

最新推荐文章于 2022-11-16 18:31:21 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签：广告对联 js

JavaScript 专栏收录该内容

27 篇文章 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>

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