任意值属性透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8 任意值属性 透明度</title>
    <style>
        body,div{
            padding:0;
            margin:0;
        }
        #div1{
            width:200px;
            height:200px;
            background-color:yellow;
            border:4px solid #000;
            opacity: 0.3;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv = document.getElementById('div1');
            oDiv.onmousemove = function(){
                startMove(oDiv,'opacity',100);
            };
            oDiv.onmouseout = function(){
                startMove(oDiv,'opacity',30);
            }
        };

        function startMove(obj,attr,iTarget){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var icur = null;          //属性值 变量
                if(attr == 'opacity'){
                    icur = Math.round(parseFloat(getStyle(obj,attr))*100);
                }else{
                    icur = parseInt(getStyle(obj,attr));
                }
                var speed = (iTarget - icur)/8;            // 速度 变速
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(icur == iTarget){       //变量变化
                    clearInterval(obj.timer);
                }else{
                    if(attr == 'opacity'){
                        obj.style.opacity = (icur + speed)/100;
                    }else{
                        obj.style[attr] = icur + speed + 'px';
                    }
                }
            },30)
        }

        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }
            else{
                return getComputedStyle(obj,false)[attr];
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

来源：https://www.cnblogs.com/Fourteen-Y/p/11957855.html

标签

speed

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!

任意值属性 透明度

任意值属性透明度