JS/JQ动画效果

1、弹出框

<style>
    .mask {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.6);
    }
    
    .mask .login  {
        width: 500px;
        height: 350px;
        background: #fff;
        margin: 150px auto;
    }
</style>
<a href="#">登录</a>
<div class="mask" id="mask">
    <div class="login" id="login">
        
    </div>
</div>
<script>
    var a = document.getElementsByTagName("a")[0];
    var mask = document.getElementById("mask");
    a.onclick = function(event) {
        mask.style.display = "block";
        // 阻止冒泡
        event = event || window.event;
        if (event || event.stopPropagation()) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
    document.onclick = function(event) {
        event = event || window.event;
        // 兼容获取触动事件时被传递过来的对象
        var aaa = event.target?event.target:event.srcElement;
        if (aaa.id !== "login") {
            mask.style.display = "none";
        }
    }
</script>

冒泡事件：

cancalBubblt()和stopPropagation()：它们相同之处在于都是用来阻止浏览器默认的事件冒泡行为。不同之处在于stopPropagation（）属于W3C标准，适用于Firefox等浏览器，但不支持IE；cancelBubble不符合W3C标准，只支持IE，所以很多时候结合起来使用。
语法：e.stopPropagation（），e代表事件传递的参数，代表事件的状态。

jQuery中对冒泡和默认行为的阻止方法同样可以写成：
event.preventDefault()——> return false; event.stopPropagation()——> return false；

猜你喜欢