js改变透明度的方式

最新推荐文章于 2023-11-26 21:30:06 发布

会长大的菜鸟

最新推荐文章于 2023-11-26 21:30:06 发布

阅读量4.7k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_42370505/article/details/106723231

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #big
        {
            height: 300px;
            width: 200px;
            background-color:black;
            position: relative;
            left: 200px;
            opacity:0.3;
            filter:alpha(opacity=30);   
        }
          
    </style>
    <script>
        window.onload = function()
        {
            var obig  = document.getElementById('big');
            obig.onmouseover = function()
            {           
                bianse(20);
            }
            obig.onmouseout = function()
            {     
                bianse(100);
            }
            function bianse(target)
            {
                var alpha=30;
                var speed='';
                clearInterval(timer);
                var timer = null;
                timer=setInterval(function()
                {
                    if(target<alpha)
                    {
                        speed=-10;
                    }
                    else{
                        speed=10;
                    }
                    if(alpha==target)
                    {
                        clearInterval(timer)
                    }
                    else{
                        alpha+=speed;
                        obig.style.filter='alpha(opacity='+speed+')';
                        obig.style.opacity=alpha/100;
                    }
                }                    
                , 30);
            }              
        }
    </script>
</head>
<body>
    <div id="big">      
    </div>
</body>
</html>
 感觉这个设计方式很巧妙，有兴趣的朋友可以研究一下