js实现关闭广告弹窗-阿里云开发者社区

js实现关闭广告弹窗

2022-11-26 307

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： js实现关闭广告弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #box {
            width: 500px;
            position: relative;
            margin: auto;
        }
        .close {
            position: absolute;
            color: #000;
            right: 0;
            top: 0;
            cursor: pointer;
        }
        .img {
            width: 500px;
        }
    </style>
</head>
<body>
    <div id="box" style="left: 0;top: 0;">
        <!-- 广告图片 -->
        <img src="../assest/images/background.jpeg" class="img">
        <!-- 关闭按钮 -->
        <div class="close" onclick=closeBtn()>关闭×</div>
    </div>
</body>
<script>
    () => {
        //获得浏览器可视区域
        var height = document.documentElement.clientHeight;
        var width = document.documentElement.clientWidth;
        //获得广告窗最大left和top
        var height = height - box.offsetHeight;
        var width = width - box.offsetWidth;
        var left = box.style.left;
        var new_left = parseInt(eft) + offsety;
        box.style.left = new_left + 'px';
        //判断当图片的边界
        if (new_left >= width) {
            offsety = -1;
        } else if (new_left <= 0) {
            offsety = 1;
        }
        //重新赋值
        var top = box.style.top;
        var new_top = parseInt(top) + offsetx;
        box.style.top = new_top + 'px';
        if (new_top >= h || new_top <= 0) {
            offsetx = offsetx * (-1);
        }
    }
    //关闭按钮
    const closeBtn = () => {
        box.style.display = "none";
    }
</script>
</html>

js实现关闭广告弹窗

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

js实现关闭广告弹窗

热门文章

最新文章

相关课程

相关电子书

相关实验场景