为了账号安全,请及时绑定邮箱和手机立即绑定

为什么这个程序将函数getStyle和startMove封装在1个js文件里,透明度运行显示不正常,而在一个html文件就能正常运行呢?

function getStyle(obj,attr){

    if(obj.currentStyle){

    return obj.currentStyle[attr];

    }else{

    return getComputedStyle(obj,false)[attr];

    }

}

function startMove(obj,attr,goal){

     clearInterval(obj.timer);

     obj.timer=setInterval(function(){

      var icce=0;

      if(attr=='opacity'){

         icce=Math.round(parseFloat(getStyle(obj,attr))*100);

      }else{

      icce=parseInt(getStyle(obj,attr));

        }

      var speed=(goal-icce)/8;

      speed=speed>0?Math.ceil(speed):Math.floor(speed);

      if (icce==goal){

      clearInterval(obj.timer);

      }else{

      if(attr=='opacity'){

      obj.style.filer='alpha(opacity:'+(icce+speed)+')';

      obj.style.opacity=(icce+speed)/100;

      }else{

      obj.style[attr]=icce+speed+'px';

      }

      }

     },30)

}


正在回答

3 回答

aLi.onmouseover=function(){

  startMove(this,'width',600);


}

ali.onmouseout=function(){

startMove(this,'opacity',90);


mouseover改变宽度,mouseout改变透明度,要完美显示,应该还需要再加定时器吧。

0 回复 有任何疑惑可以回复我~

合到一起就能完美运行显示,这是为什么

0 回复 有任何疑惑可以回复我~

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

     ul,li{

      list-style: none;

     }

     li{

        width:400px;

        height: 200px;

        background: green;      

        border-radius: 10px;

        border: 4px solid #111;

        filter: alpha(opacity:30);

        opacity: 0.3;

     }

</style>

<script src="js/move.js"></script>

<script>

window.onload=function(){

var aLi=document.getElementById('ali');

aLi.onmouseover=function(){

  startMove(this,'width',600);


}

ali.onmouseout=function(){

startMove(this,'opacity',90);

}

}

</script>

</head>

<body>

  <ul>

  <li id="ali"></li>

  </ul>

</body>

</html>

这个是与之相关的html

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么这个程序将函数getStyle和startMove封装在1个js文件里,透明度运行显示不正常,而在一个html文件就能正常运行呢?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信