JavaScript 网页设计广告窗口

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.onscroll=move;

</script>

<body onload="init()">

<div id="closeLayer" onclick="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>

猜你喜欢

转载自my.oschina.net/u/3807502/blog/1814585