制作带关闭按钮的固定广告

最新推荐文章于 2020-11-27 12:53:10 发布

sam_文刀

最新推荐文章于 2020-11-27 12:53:10 发布

阅读量8.1k

点赞数 13

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_39879340/article/details/78096611

版权

js 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

这里写图片描述
需求说明
当滚动条向下或向右移动时，图片和关闭按钮随滚动条移动，相对于浏览器的位置固定
单击关闭按钮，页面中的图片和关闭按钮不显示

function adv_close(){
    document.getElementById("close").style.display="none";
    document.getElementById("float").style.display="none";
}
window.onload = function(){
    var img1 = document.getElementById("float");
    var top1 = img1.offsetTop;
    var left1 = img1.offsetLeft;
    var img2=document.getElementById("close");
    var top2 = img2.offsetTop;
    var left2 = img2.offsetLeft;
    window.onscroll = function(){
        img1.style.top = top1 + (document.documentElement.scrollTop || document.body.scrollTop) +"px";
        img1.style.left = left1 + (document.documentElement.scrollLeft || document.body.scrollLeft) +"px";
        img2.style.top = top2 + (document.documentElement.scrollTop || document.body.scrollTop) +"px";
        img2.style.left = left2 + (document.documentElement.scrollLeft || document.body.scrollLeft) +"px";
    }
}

<head lang="en">
    <meta charset="UTF-8">
<title>带关闭按钮的滚动广告</title>
<style type="text/css">
    body{
        width: 2000px;;
    }
#main{ text-align:center;}
#float{
    position:absolute;
    left:30px;
    top:60px; 
    z-index:1;
    }
#close{
    position:absolute;
    top:60px;
    left:134px;
    z-index:2;
    cursor:hand;
}
</style>
    <script rel="stylesheet" src="gundong.js" type="text/javascript"></script>
</head>
<body>
<div id="close" onclick="adv_close()"><img src="images/close.jpg"></div>
<div id="float"><img src="images/advpic.jpg"></div>
<div id="main"><img src="images/contentpic.jpg"></div>
</body>