以下是 左右固定顶部可收缩的全屏广告代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,全屏广告,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为左右固定顶部可收缩的全屏广告代码,属于站长常用代码" />
<title>左右固定顶部可收缩的全屏广告代码</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="ad_midd"><a href="#" target="_blank"><img src="images/mid.jpg"></a></div>
<div class="contentad">
<a class="ad_left" href="#" target="_blank"><img src="images/left.jpg"></a>
<a class="ad_right" href="#" target="_blank"><img src="images/right.jpg"></a>
</div>
<div class="content">网页主体内容区域</div>
<!-- 代码 结束 -->
</body>
</html>
JS代码(lrtk.js):
// ����ͼ���ռ����� www.lanrentuku.com/js/setTimeout(function(){
$('.ad_midd').slideUp();
}
,5000 )
CSS代码(lrtk.css):
/* CSS Document */
body{background:#101010;color:#fff;font-family:"Microsoft YaHei","Tahoma","SimSun";font-size:12px}
a{color:#0096ff;outline:none}
a:hover{text-decoration:underline}
a:active{outline:none}
img{border:none;}
.content{margin:0 auto;background:#202020;padding:15px 10px;width:982px}
.ad_left,.ad_right{display:block;position:fixed;width:445px;height:865px;top:0;text-decoration:none;outline:0}
.ad_left{margin:0 0 0 -455px}
.ad_right{margin:0 0 0 992px}
.ad_midd{width:1002px;margin:0 auto;overflow:hidden;height:300px;position:relative;clear:both}
.contentad{width:982px;padding:0 10px;margin:0 auto}
.btm{margin:30px auto}
.btm p{font:normal 12px/24px 'Microsoft YaHei';text-align:center}