为什么我的只有在调‘opacity’的时候有用啊？-慕课网

为什么我的只有在调‘opacity’的时候有用啊？

来源：4-4 任意属性值（二）

qq_烟火里的尘埃_0

2016-01-07 20:01

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
        }
        ul li{
            width:200px;
            height: 80px;
            background: red;
            margin-bottom: 20px;
            border: 4px solid black;
            opacity: 0.3;
            filter: alpha(opacity:30);
        }
    </style>
    <script>
        window.onload=function(){
            var Li = document.getElementsByTagName("li")[0];
                Li.onmouseover = function(){
                    startMove(this,'height',200);
                };
                Li.onmouseout = function(){
                    startMove(this,'height',80);
                };

            var timer = null;
 
            function startMove(obj,attr,target){
                    clearInterval(timer);
                    timer = setInterval(function(){
                    var icur = 0;
                        if(attr == 'opacity'){
                            icur = parseFloat(getStyle(obj,attr))*100;
                        }else{
                            icur = parseInt(getStyle(obj,attr));
                        }
 
                    var speed = (target - icur)/8;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(icur == target){
                        clearInterval(timer);
                    }
                    else{
                        if(attr == 'opacity'){
                            obj.style.filter = 'alpha(opacity:'+ (icur + speed)+')';
                            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>
<ul>
    <li></li> 
</ul>
</body>
</html>

写回答关注