怎么然数字渐变消失

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{margin: 0px;padding: 0px;}
    .box{width: 400px;height: 60px;margin:200px auto;border: 1px solid #1C1818;position: relative;}
    .list{list-style: none;}
    .list li{position: absolute;width: 40px;height: 60px;text-align: center;line-height: 60px; top: 0;opacity: 1;filter:alpha(opacity=100);}
    .rate{height: 60px;background-color: #C30C0C;width: 0px;position: absolute;left: 0px;z-index: -100}
    </style>
</head>
<body>
    <div>
        <div id="div"></div>
        <ul id="list">
            <li>+1</li>
            <li>+1</li>
            <li>+1</li>
            <li>+1</li>
            <li>+1</li>
            <li>+1</li>
            <li>+1</li>
            <li>+1</li>
            <li>+1</li>
            <li>+1</li>
        </ul>
    </div>
    <script>
        window.onload = function(){
            var oList = document.getElementById('list');
            var oDiv = document.getElementById('div');
            var aLi = oList.getElementsByTagName('li');
            var timer1 = null;
            var timer2 = null;
            var timer3 = null;
            var onOff = true;
            var num = 0;
            var alpha = 100;
            var iNow = 1;

            for (var i = 0; i < aLi.length; i++) {
                aLi[i].style.left = i*40+'px';
            }
            document.onclick = function(){
                if (onOff) {onOff= false;fn1();fn2();fn3()}
            }
            function getStyle(obj,attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
            }
            
            function doMove(obj,attr,dir,target){
                dir = parseInt(getStyle(obj,attr))<target?dir:-dir;
                clearInterval(obj.timer);
                setInterval(function(){
                    var speed = parseInt(getStyle(obj,attr))+dir;
                    if (speed>target&&dir>0 || speed<target&&dir<0) 
                        {speed= target;}
                    obj.style[attr] = speed+'px';
                    if (speed == target) {clearInterval(obj.timer);}
                },100)
            }
            function fn1(){    
                //var count = 0;
                clearInterval(timer1);
                timer1 = setInterval(function(){
                    doMove(aLi[num],'top',-30,-200);
                    num++;
                    if (num == aLi.length) {
                        clearInterval(timer1);                        
                    }
                },100)
            }
            function fn2(){
                var count = 1;
                clearInterval(timer2);
                timer2 = setInterval(function(){
                    oDiv.style.width = count*40+'px';//alert(1);
                    count++;
                    if (count == 11) {clearInterval(timer2);}
                },100)
            }
            function fn3(){
                //透密度渐变消失
                
                        }
                },30)
            }
            
        }
    </script>
</body>
</html>
罗富文1995ing
浏览 1388回答 1
1回答

木子兮
渐变是动画操作 css控制
0 0
随时随地看视频慕课网APP