如何用JS编写联动式广告和弹出广告的代码,使其能一键关闭且不会随着页面滚动而出现
最编程
2024-02-06 18:18:24
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.web{
width: 1000px;
height: 1500px;
background-color: #CCCCCC;
border: #666666 1px solid;
margin: 0 auto;
}
/*对联广告样式*/
#ad1,#ad2{
position: fixed;
top:50px;
width:100px;
height: 200px;
background-image: url(ad1.jpg);
}
#ad1{left: 0;}/*靠左*/
#ad2{right:0 ;}/*靠右*/
/*弹窗广告样式*/
#ad3{
position: fixed;
bottom:0px;/*右下*/
right:0px;
height:250px ;
width:300px ;
background-image: url(ad2.jpg);
}
/*关闭按钮图片样式*/
#close,#close1{
width: 50px;
height:15px ;
object-fit: cover;
position: absolute;
bottom:0;
right:0;
background-image: url(close.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
#close3{
width: 50px;
height:15px ;
object-fit: cover;
position: absolute;
top:0;
right:0;
background-image: url(close.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
</style>
</head>
<body>
<div id=ad1>
<div id="close" ></div>
</div>
<div class="web"></div>
<div id=ad2>
<div id="close1" ></div>
</div>
<div id="ad3" style="display:none;"><div id="close3"></div></div>
</body>
<script type="text/javascript">
var close=document.querySelector("#close");
var close1=document.querySelector("#close1");
var close3=document.querySelector("#close3");
var ad1=document.getElementById('ad1');
var ad2=document.getElementById('ad2');
// 关闭左边
close.οnclick=function(){
ad1.style.display="none";
ad2.style.display="none";
}
// 关闭右边
close1.οnclick=function(){
ad1.style.display="none";
ad2.style.display="none";
}
// 关闭弹窗广告
close3.οnclick=function(){
var ad3=document.getElementById('ad3');
ad3.style.display="none";
}
//1.5s弹出弹窗广告
window.οnlοad=function(){//页面加载事件
var ad3=setTimeout(function(){
var ad3=document.getElementById('ad3');
ad3.style.display="inline"
},1500)
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.web{
width: 1000px;
height: 1500px;
background-color: #CCCCCC;
border: #666666 1px solid;
margin: 0 auto;
}
/*对联广告样式*/
#ad1,#ad2{
position: fixed;
top:50px;
width:100px;
height: 200px;
background-image: url(ad1.jpg);
}
#ad1{left: 0;}/*靠左*/
#ad2{right:0 ;}/*靠右*/
/*弹窗广告样式*/
#ad3{
position: fixed;
bottom:0px;/*右下*/
right:0px;
height:250px ;
width:300px ;
background-image: url(ad2.jpg);
}
/*关闭按钮图片样式*/
#close,#close1{
width: 50px;
height:15px ;
object-fit: cover;
position: absolute;
bottom:0;
right:0;
background-image: url(close.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
#close3{
width: 50px;
height:15px ;
object-fit: cover;
position: absolute;
top:0;
right:0;
background-image: url(close.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
</style>
</head>
<body>
<div id=ad1>
<div id="close" ></div>
</div>
<div class="web"></div>
<div id=ad2>
<div id="close1" ></div>
</div>
<div id="ad3" style="display:none;"><div id="close3"></div></div>
</body>
<script type="text/javascript">
var close=document.querySelector("#close");
var close1=document.querySelector("#close1");
var close3=document.querySelector("#close3");
var ad1=document.getElementById('ad1');
var ad2=document.getElementById('ad2');
// 关闭左边
close.οnclick=function(){
ad1.style.display="none";
ad2.style.display="none";
}
// 关闭右边
close1.οnclick=function(){
ad1.style.display="none";
ad2.style.display="none";
}
// 关闭弹窗广告
close3.οnclick=function(){
var ad3=document.getElementById('ad3');
ad3.style.display="none";
}
//1.5s弹出弹窗广告
window.οnlοad=function(){//页面加载事件
var ad3=setTimeout(function(){
var ad3=document.getElementById('ad3');
ad3.style.display="inline"
},1500)
}
</script>
</html>