我想把透明度和速度结合一起-慕课网

我想把透明度和速度结合一起

来源：4-1 JS多物体动画

jicheng

2016-07-01 14:54

我的想法是这样的，（1）当我鼠标点击的时候，透明度变深的同时宽度也增加； 
               （2） 当我鼠标离开的时候，透明度恢复默认数值的同时宽度也倒回原始；
目前实现了（1），但鼠标离开的时候透明度不会回到原始值；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin:0px;padding:0px;}
            li{list-style:none;}
            li{
            width:200px;
            height:200px;
            background:red;
            border-radius:10px;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            margin:10px 10px 0 10px;
            filter:alpha(opacity:30);
            opacity:0.3;
        </style>
        <script type="text/javascript" >
        window.onload=function(){
            var oli=document.getElementsByTagName("li");
            for(var i=0;i<oli.length;i++){
                oli[i].onmouseover=function(){
                    startM(this,420,100);
                }
                oli[i].onmouseout=function(){
                    startM(this,210,30);
                }
            }
        }
         var timer;
         var sudu=8;
         var alpha=30;
         function startM(obj,it,itm){
             clearInterval(obj.timer);
             obj.timer=setInterval(function(){
                 var tmsd=0;
                 if(alpha>obj.itm){tmsd=-10}else{tmsd=10;}
                 if(alpha==obj.itm){clearInterval(obj.timer);}
                 else{alpha+=tmsd;
                     obj.style.opacity=alpha/100;
                     obj.style.filter="alpha(opacity:'+alpha+')";
                 }
                 var speed=(it-obj.offsetWidth)/sudu;
                 speed=speed>0?Math.ceil(speed):Math.floor(speed);
                 if(it==obj.offsetWidth){
                     clearInterval(obj.timer);
                 }
                 else{obj.style.width=obj.offsetWidth+speed+"px";}
             },30);
         }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li>
            </li>
            <li></li>
            <li></li>
            <li></li>
            
        </ul>
    </body>
</html>

写回答关注