首页 > 上网技巧 > 电脑小技巧 > 原生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提供的广告