练习：javascript淡入淡出半透明效果

Posted 行走的小白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了练习：javascript淡入淡出半透明效果相关的知识，希望对你有一定的参考价值。

划过无透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出半透明效果</title>
    <style>
        img {width:400px;height:200px;opacity: 0.3;filter:alpha(opacity=30)}
    </style>
</head>
<body>
<img src="images/4.jpg" alt="" id="img">
<script>
    // opacity IE8及以下版本不支持
    var oImg= document.getElementById(\'img\');
    oImg.onmouseover=function(){
        animate(30,100)
    }
    oImg.onmouseout=function(){
        animate(100,30)
    }
    var timer = null;
    function animate(speed,dest){
       //speed初始透明度，dest透明度目标值
        clearInterval(timer);
        timer = setInterval(function(){
            speed<dest?speed+=10:speed-=10;
            if(speed==dest){
                clearInterval(timer);
                timer=null;
            }else {
                oImg.style.opacity=speed/100;
                oImg.style.filter="alpha(opacity:"+speed+")";
            }
        },20)
    }
</script>
</body>
</html>

 

以上是关于练习：javascript淡入淡出半透明效果的主要内容，如果未能解决你的问题，请参考以下文章

文字淡入淡出详解

淡入淡出效果 (jQuery)

jQuery动画（显示隐藏，淡入淡出，滑动）

jQuery-4.动画篇---淡入淡出效果

原生JS写一个淡入淡出轮播图

WPF实现渐变淡入淡出的动画效果