题目:用滑动的方法去实现页面某个位置固定一个广告,并且每次点击关闭后,5s后该广告会再次出现
<style>
*{
margin:0px;
padding: 0px;
}
body{
text-align: center;
}
div{
width: 117px;
height: 150px;
background: url(./images/advpic.jpg);
position: absolute;
left:30px;
top:20px;
text-align: right;
}
</style>
<div>
<img src="./images/close.jpg" alt="">
</div>
<img src="./images/contentpic.jpg" alt="">
<script>
//获取操作对象
var div1=document.querySelector('div')
var firstImg=document.querySelector("img")
//获取div对象本身的偏移量
if(div1.currentStyle){
//IE低版本
var top1=div1.currentStyle.top
}else{
//非IE低版本使用的方式
var top1=window.getComputedStyle(div1).top
}
console.log(top1)
//给window对象绑定滚动事件
window.οnscrοll=function(){
//获取滚动距离
var t1=document.documentElement.scrollTop
//给div对象重新设置上边偏移量
div1.style.top=parseInt(top1)+t1+'px'
}
//给当前按钮绑定点击事件
firstImg.οnclick=function(){
div1.style.display='none'
//设置一个倒计时5秒打开广告的方式
setTimeout(function(){
div1.style.display="block"
},5000)
}
</script>