<option id="tpnx7"><p id="tpnx7"><pre id="tpnx7"></pre></p></option>
<output id="tpnx7"></output>
<output id="tpnx7"><ruby id="tpnx7"></ruby></output>
    <output id="tpnx7"></output><acronym id="tpnx7"><button id="tpnx7"><div id="tpnx7"></div></button></acronym><code id="tpnx7"><menuitem id="tpnx7"></menuitem></code>

    首页 > 上网技巧 > 电脑小技巧 > 原生JS实现 fadeIn / fadeOut 方法

    原生JS实现 fadeIn / fadeOut 方法

    时间:2018-12-20 09:47 作者:QQ地带 我要评论

    js 源码:
     
    Object.prototype.fadeIn = function(time, callback) {
        var el = this;
        el.style.opacity = 0;
        var st = setInterval(function() {
            el.style.opacity = parseFloat(el.style.opacity) + 0.01;
            if (el.style.opacity >= 1) {
                clearInterval(st);
                if (callback !== undefined) {
                    callback();
                }
            }
        }, time);
        return this;
    }
     
    Object.prototype.fadeOut = function(time, callback) {
        var el = this;
        el.style.opacity = 1;
        var st = setInterval(function() {
            el.style.opacity = parseFloat(el.style.opacity) - 0.01;
            if (el.style.opacity <= 0) {
                clearInterval(st);
                if (callback !== undefined) {
                    callback();
                }
            }
        }, time);
        return this;
    }
     
    window.onload = function() {
        var el = document.querySelector(".spinner");
        el.fadeOut(50, function() {
            el.fadeIn(50, function() {
                console.log("finished");
            });
        });
    }
    示例:
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .spinner {
                width: 60px;
                height: 60px;
                position: relative;
                margin: 100px auto;
            }
     
            .double-bounce-outer, .double-bounce-inner {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #67CF22;
                opacity: 0.6;
                position: absolute;
                top: 0px;
                left: 0px;
                -webkit-animation: bounce 2.0s infinite ease-in-out;
                animation: bounce 2.0s infinite ease-in-out;
            }
     
            .double-bounce-inner {
                -webkit-animation-delay: -1.0s;
                animation-delay: -1.0s;
            }
            
            @keyframes bounce {
                0%, 100% {
                    transform: scale(0.0);
                } 50% {
                    transform: scale(1.0);
                }
            }
     
            @-webkit-keyframes bounce {
                0%, 100% {
                    -webkit-transform: scale(0.0);
                } 50% {
                    -webkit-transform: scale(1.0);
                }
            }
        </style>
    </head>
    <body>
    <div class="spinner">
        <div class="double-bounce-outer"></div>
        <div class="double-bounce-inner"></div>
    </div>
    <script type="text/javascript">
    Object.prototype.fadeIn = function(time, callback) {
        var el = this;
        el.style.opacity = 0;
        var st = setInterval(function() {
            el.style.opacity = parseFloat(el.style.opacity) + 0.02;
            if (el.style.opacity >= 1) {
                clearInterval(st);
                if (callback !== undefined) {
                    callback();
                }
            }
        }, time);
        return this;
    }
     
    Object.prototype.fadeOut = function(time, callback) {
        var el = this;
        el.style.opacity = 1;
        var st = setInterval(function() {
            el.style.opacity = parseFloat(el.style.opacity) - 0.02;
            if (el.style.opacity <= 0) {
                clearInterval(st);
                if (callback !== undefined) {
                    callback();
                }
            }
        }, time);
        return this;
    }
     
    window.onload = function() {
        var el = document.querySelector(".spinner");
        el.fadeOut(20, function() {
            el.fadeIn(20, function() {
                console.log("finished");
            });
        });
    }
    </script>
    </body>
    </html>
    复制粘贴保存打开见效果......

    标签: JS
    顶一下
    (0)
    0%
    踩一下
    (0)
    0%

    Google提供的广告

    广东十分快乐开奖结果
    <option id="tpnx7"><p id="tpnx7"><pre id="tpnx7"></pre></p></option>
    <output id="tpnx7"></output>
    <output id="tpnx7"><ruby id="tpnx7"></ruby></output>
    <output id="tpnx7"></output><acronym id="tpnx7"><button id="tpnx7"><div id="tpnx7"></div></button></acronym><code id="tpnx7"><menuitem id="tpnx7"></menuitem></code>

    <option id="tpnx7"><p id="tpnx7"><pre id="tpnx7"></pre></p></option>
    <output id="tpnx7"></output>
    <output id="tpnx7"><ruby id="tpnx7"></ruby></output>
    <output id="tpnx7"></output><acronym id="tpnx7"><button id="tpnx7"><div id="tpnx7"></div></button></acronym><code id="tpnx7"><menuitem id="tpnx7"></menuitem></code>