欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS特效——侧边广告

程序员文章站 2022-05-28 19:41:45
...

知识点

  1. 阻止冒泡:事件会产生冒泡现象,点击div会向完成不断传递,如果不阻止会触发外部有相同现象的函数。
    if(event && event.stopPropagation){ // w3c标准
        event.stopPropagation();
    }else{ // IE系列 IE 678
        event.cancelBubble = true;
    }
    
  2. 实现居中
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(高度一半,宽度一半);
    

运行效果

点击立即登录,弹出一个div(模拟登录界面),点击div外会关闭蒙版,点击div内部会进行跳转。
JS特效——侧边广告

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        html,body{width: 100%;height: 3000px}
        #panel{
            width: 100%;
            height: 100%;
            background-color: #000;
            position: absolute;
            left: 0;
            top:0;
            opacity: .4;
            display: none;
        }
        #login{
            width: 300px;
            height: 300px;
            background-color: red;
            border-radius: 5px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-150px,-150px);
            display: none;
        }
    </style>
</head>
<body>
<button id="btn">立即登录</button>
<div id="panel"></div>
<div id="login"></div>
<script src="../MyTools/MyTools.js"></script>
<script>
    window.addEventListener('load',function (ev) {
        // 1. 监听按钮点击
        var addEventListener = myTool.$('btn').addEventListener('click',function () {
        	// 阻止冒泡
            if(event && event.stopPropagation){ // w3c标准
                event.stopPropagation();
            }else{ // IE系列 IE 678
                event.cancelBubble = true;
            }
            // 1.1 显示面板和蒙版
            myTool.$('panel').style.display = 'block';
            myTool.$('login').style.display = 'block';
            // 1.2 隐藏滚动条
            document.body.style.overflow = 'hidden'
        });
        // 2. 监听文档点击
        document.addEventListener('click',function (ev1) {
            var e = ev1 || window.event;

            // 2.1 获取点击标签
            // 兼容设置 IE需要用srcElement获取标签
            var targetId = e.target ? e.target.id : e.srcElement.id;
            // 2.2 判断
            if (targetId !== 'login'){
                myTool.$('panel').style.display = 'none';
                myTool.$('login').style.display = 'none';
                document.body.style.overflow = 'auto'
            }else {
                window.location.href = 'https://blog.csdn.net/KaiSarH';
            }
        })

    },false)
</script>
</body>
</html>
相关标签: # JS特效