<!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>
js实现广告弹出框
于 2012-11-01 18:05:24 首次发布