                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

我想把透明度和速度結(jié)合一起

我的想法是這樣的，（1）當(dāng)我鼠標(biāo)點(diǎn)擊的時(shí)候，透明度變深的同時(shí)寬度也增加；?
???????????????（2）?當(dāng)我鼠標(biāo)離開的時(shí)候，透明度恢復(fù)默認(rèn)數(shù)值的同時(shí)寬度也倒回原始；
目前實(shí)現(xiàn)了（1），但鼠標(biāo)離開的時(shí)候透明度不會(huì)回到原始值；

<!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>