html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>广告实验</title>
<style>
body{
margin: 0;
padding: 0;
}
.web{
width: 950px;
height: 1000px;
background-color: #cecece;
border: #666666 1px solid;
margin: 0 auto;
padding: 20px;
}
.top{
width: 950px;
height: 1000px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="web">
<h1>各地出台具体措施保障“菜篮子”安全</h1>
<p>近日,各地出台具体措施保障“菜篮子”安全,确保今冬明春蔬菜等生活必需品市场保供稳价。</p>
<img src="imgs/top.png" alt="#" class="top" />
</div>
<script src = "./guanggao.js" type="text/javascript"></script>
</body>
</html>
js页面
//定义广告两边的初始属性
var l_width = "100px";
var l_height = "250px";
var l_img="imgs/ad1.jpg";
var l_img1="imgs/ad2.jpg";
var l_close="imgs/close.png";
//创建广告容器的div 左边
var l_left =document.createElement("div");
l_left.style.width = l_width; /* 定义左边容器的长 ,连接上面已定义*/
l_left.style.height = l_height; /* 定义左边容器的高,上面已定义*/
l_left.style.padding="0px"; /* 内边距属性*/
l_left.style.position="absolute"; /* Position属性规定元素的定位类型 绝对的*/
l_left.style.left = "30px";
//创建广告容器的div 右边
var l_right =document.createElement("div");
l_right.style.width = l_width; /* 定义右边容器的长 ,连接上面已定义*/
l_right.style.height = l_height; /* 定义右边容器的高,上面已定义*/
l_right.style.padding="0px"; /* 内边距属性*/
l_right.style.position="absolute"; /* Position属性规定元素的定位类型 绝对的*/
l_right.style.right= "30px";
//创建广告容器的div 下
var l_down =document.createElement("div");
l_down.id = "down"; /* 给一个值为id:down*/
l_down.style.width = "300px"; /* 定义容器的长 ,连接上面已定义*/
l_down.style.height = "250px"; /* 定义容器的高,上面已定义*/
l_down.style.padding="0px"; /* 内边距属性*/
l_down.style.position="absolute"; /* Position属性规定元素的定位类型 绝对的*/
l_down.style.right = "10px";
l_down.style.top = "450px";
//创建 img 元素,并加入到 l_left 中,作为广告图片
var limg1=document.createElement("img");
limg1.src=l_img;
l_left.appendChild(limg1);
//创建 img 元素,并加入到 l_right 中,作为广告图片
var limg2=document.createElement("img");
limg2.src=l_img;
l_right.appendChild(limg2);
//创建 img 元素,并加入到 l_down 中,作为广告图片
var limg3=document.createElement("img");
limg3.src=l_img1;
l_down.appendChild(limg3);
//创建关闭按钮,并加入到 l_left 中
var closeimg1=document.createElement("img");
closeimg1.src=l_close;
closeimg1.style.width="50px";
closeimg1.style.position="relative";
closeimg1.style.left="50px";
closeimg1.style.top="-20px";
closeimg1.style.cursor="pointer";
l_left.appendChild(closeimg1);
//创建关闭按钮,并加入到 l_right 中
var closeimg2=document.createElement("img");
closeimg2.src=l_close;
closeimg2.style.width="50px";
closeimg2.style.position="relative";
closeimg2.style.right="0px";
closeimg2.style.top="-20px";
closeimg2.style.cursor="pointer";
l_right.appendChild(closeimg2);
//创建关闭按钮,并加入到 l_down 中
var closeimg3=document.createElement("img");
closeimg3.src=l_close;
closeimg3.style.width="50px";
closeimg3.style.position="relative";
closeimg3.style.right="0px";
closeimg3.style.top="0px";
closeimg3.style.cursor="pointer";
l_down.appendChild(closeimg3);
//将l_left添加到html中
document.documentElement.appendChild(l_left);
//将l_right添加到html中
document.documentElement.appendChild(l_right);
//定时,在页面更新的几秒之后把l_down添加到html页面中
window.setTimeout(function(){
document.documentElement.appendChild(l_down);
},1000)
//为关闭按钮注册单击事件,实现关闭广告功能
closeimg1.addEventListener("click", function(){
this.parentNode.style.display="none";
})
closeimg2.addEventListener("click", function(){
this.parentNode.style.display="none";
})
closeimg3.addEventListener("click", function(){
this.parentNode.style.display="none";
})
//编写代码,实现对联广告随滚动条移动
//scrollTop 代表由于滚动隐藏的高度
window.addEventListener("scroll",function(){
var st1=document.documentElement.scrollTop||document.body.scrollTop;
l_left.style.top=(st1+20)+"px";
l_right.style.top=(st1+20)+"px";
l_down.style.top=(st1+450)+"px";
})
window.setTimeout(function(){
document.getElementById("down").innerHTML = ""; //设置10秒后 id值为空 广告自然消失
},10000) //10000毫秒 1000毫秒=1秒
本人图片文件在imgs下,图片各位老板可以自行添加
视频详细讲解请移步bilibili:小安小安la (感谢各位老板!)