不能改变宽度，鼠标放上去，改变的还是透明度，大神求解！-慕课网

不能改变宽度，鼠标放上去，改变的还是透明度，大神求解！

来源：-

qq_SakuraSakura_03906596

2016-09-01 19:34

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>getStyle-1</title>
   <style type="text/css">
*{margin: 0;padding: 0;border: 0;}
       ul li{
           list-style-type: none;
           margin: 10px;
           background-color: #2e9fdb;
           width: 200px;
           height: 100px;
           border: 1px solid red;
           filter:alpha(opacity:30);
           opacity: 0.3;
       }
   </style>
</head>
<body>
<ul>
   <li id="li1"></li>
</ul>
<script>
var li1=document.getElementById("li1");
   li1.onmouseover=function(){
       startMove(this,"width",400);
   };
   li1.onmouseout=function(){
       startMove(this,"width",100);
   };
   var timer=null;
//    alert(0.03*100)//3
//    alert(0.07*100)//7.000000000001
//    alert(Math.round(0.07*100))//7, 四舍五入取整
function startMove(obj,aTtr,iTarget){
       clearInterval(timer);
       timer=setInterval(function(){
           var iCur=0;
           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(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>
</body>
</html>

写回答关注

1回答

qq_SakuraSakura_03906596

2016-09-02 16:41:33

53行aTtr=="opacity"

0 0

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题

改变透明度

回答 1

透明度的改变

回答 1

透明度没有改变

回答 5

同时执行透明度和宽度改变的问题

回答 2

鼠标移入移出改变DIV透明度的效果，用CSS还是JS去实现？

回答 1

打开慕课网App查看更多内容