js实现广告弹出框

链诸葛

已于 2022-12-02 19:41:48 修改

阅读量2.1k

点赞数

分类专栏： jQuery js 文章标签： js实现弹出广告

于 2012-11-01 18:05:24 首次发布

本文链接：https://blog.csdn.net/kzhzhang/article/details/84343377

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

jQuery

15 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>广告</title>
<style type="text/css">
body {
	background: #333333;
}

#ADPanel {
	width: 400px;
	height: 0px;
	position: absolute;
	right: 0;
	bottom: 0;
	border: 1px solid #999999;
	margin: 0;
	padding: 1px;
	overflow: hidden;
	display: none;
	background: #FFFFFF
}

#ADPanel .panelTitle {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background: #9F00F4;
	color: white;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
}

#ADPanel .panelContent {
	width: 100%;
	line-height: 80px;
	text-align: center
}

.close {
	position: absolute;
	right: 4px;
	top: -1px;
	cursor: pointer
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
	$(function() {
		//默认加载广告
		showAD();
	});
	
	function showAD() {
		//获取广告图层的高度
		var ADPanel = $('#ADPanel');
		var panelHeight = ADPanel.height();
		if(panelHeight >= 360) {
			return;
		}
		//使广告图层可见
		$('#ADPanel').css('display','block');
		//设置定时器，每20毫秒升高广告图层4px
		timer = setInterval("changeH(4)", 20); 
	}
	
	function hideAD() {
		var ADPanel = $('#ADPanel');
		var panelHeight = ADPanel.height();
		if(panelHeight <= 0) {
			return;
		}
		//设置定时器，每20毫秒降低广告图层4px
		timer = setInterval("changeH(-4)", 20); 
	}
	function changeH(step) {
		var ADPanel = $('#ADPanel');
		var panelHeight = ADPanel.height();
		if(panelHeight <= 360 && step > 0 || panelHeight >= 4 && step < 0) {
			ADPanel.height(panelHeight + step);
		}else{
			clearInterval(timer);
			$(ADPanel).css('display',step > 0 ? 'block' : 'none');
		};
	}
</script>
<script language="javascript">

</script>
</head>
<body>
	<div id="ADPanel">
		<div class="panelTitle">
			<span>商务合作</span> <span class="close" onclick="hideAD()"> <img
				style="margin-top: 8px;" alt="关闭" src="./images/cancel.png"
				title="关闭">
			</span>
		</div>
		<div class="panelContent">
			<img style="margin-top: 8px;" alt="商务"
				src="./images/lianzhuge-cn.jpg" title="商务">
		</div>
	</div>
</body>
</html>

链诸葛

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
js实现广告弹出框

测试body { background: #333333;}#winpop { width: 400px; height: 0px; position: absolute; right: 0; bottom: 0; border: 1px solid #999999; margin: 0; padding: 1px; ...
复制链接

扫一扫