练习：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>

 

posted @ 2019-01-04 20:01  YJUI  阅读(259)  评论(0)    收藏  举报