setInterval实现渐变效果

最新推荐文章于 2022-08-30 18:43:28 发布

RebootTang

最新推荐文章于 2022-08-30 18:43:28 发布

阅读量427

点赞数

本文链接：https://blog.csdn.net/applyTang/article/details/94412730

版权

实现功能：
1.点击淡出按钮，蓝色区域颜色逐渐变淡直至完全透明。
2.蓝色区域变透明的同时，淡出按钮中的文字变为淡入。
3.点击淡入后，透明的背景逐渐变回蓝色，按钮文字变回淡出。

<body>
    <div id="fade-obj" style="width:300px;height:300px;background:#3399FF"></div>
    <button id="fade-btn">淡出</button>
</body>
<script>
var transColor = document.querySelector('div');
var btnRest = document.querySelector('button');
var speed;
var timer = null;
var alpha;
var target;

// console.log('%O', btnRest);

function startRun() {
    if(btnRest.innerHTML === '淡出') {
        var btnText = '淡入';
        speed = -2;
        alpha = 100;
        target = 0;
    }
    else {
        var btnText = '淡出';
        speed = 2;
        alpha = 0;
        target = 100;
    }
    
    btnRest.disabled = true;
    timer = setInterval(function() {
        alpha = alpha + speed;
        transColor.style.opacity = alpha / 100;
        transColor.style.filter = 'alpha(opacity = alpha)';
        if (alpha == target) {
            clearInterval(timer);
            btnRest.disabled = false;
            btnRest.innerHTML = btnText;
        }
    }, 30)
}
btnRest.onclick = startRun;

</script>

RebootTang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
setInterval实现渐变效果

<body> <div id="fade-obj" style="width:300px;height:300px;background:#3399FF"></div> <button id="fade-btn">淡出</button></body><script>var transColor...
复制链接

扫一扫