javascript 实现网页广告设置
实现思路：
1、广告层居左显示需要设置style的绝对定位
2、z-index表示z轴的区别，使用z-index属性决定层叠顺序
3、广告层要随滚动条同步移动
代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任务</title>
</head>
<script type="text/javascript">
var advInitTop=0;
var closeInitTop=0;
function init(){
advInitTop=parseInt(document.getElementById("advLayer").style.top.slice(0, -2));
closeInitTop=parseInt(document.getElementById("closeLayer").style.top.slice(0, -2));
}
function move(){
//控制广告图片总位于页面顶端左边位置
document.getElementById("advLayer").style.top=advInitTop+document.body.scrollTop;
//控制关闭图片总位于页面顶端左边位置
document.getElementById("closeLayer").style.top=closeInitTop+document.body.scrollTop;
}
function closeMe(){
document.getElementById("closeLayer").style.display="none";
document.getElementById("advLayer").style.display="none";
}
//窗口的滚动事件，当页面滚动时调用move()函数
window.οnscrοll=move;
</script>
<body οnlοad="init()">
<div id="closeLayer" οnclick="closeMe()" style="position:absolute;right:40px;top:80px;width:54px;height:19px;z-index:2;" >
<a href="#"><font color="#0000FF" face="黑体">关闭</font></a></div>
<p align="center"><img src="images/sina.jpg" width="1349" height="6816"></p>
<div id="advLayer" style="position:absolute;right:30px;top:100px;width:86px;height:81px;z-index:1;" >
<a href="http://www.taobao.com"><img src="images/adv.jpg" width="85" height="80" border="0"></a></div>
</body>
</html>
2374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
