Js完美框架案例中,不设置鼠标移出事件时,鼠标重复经过物体,物体会不停变大。代码有什么问题吗?


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>完美框架</title>

<style type="text/css">

body{

margin: 0;

padding: 0;

}

 

ul,li{

   list-style:none;

}

ul li{


width: 100px;


height:100px;


background:yellow;


margin-bottom:20px;

        filter:alpha(opacity:30);

        opacity:0.3;

}


</style>

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

<script>

window.onload=function(){

  var oLis=document.getElementsByTagName("li");

  for(var i=0;i<oLis.length;i++){

    oLis[i].onmouseover=function(){

       startMove(this,{width:300,height:300,opacity:100});

   }

    oLis[i].onmouseout=function(){

       startMove(this,{width:100,height:100,opacity:30});

   }

 }

}

</script>

</head>

<body>

<ul>

  <li></li>

  <li></li>

  <li></li>

</ul>

</body>

</html>




引入的Js代码:

function getStyle(obj,attr){

  if(obj.currentStyle){

    return obj.currentStyle[attr];

  }

    else{return getComputedStyle(obj,false)[attr];

  }

}

function startMove(obj,json,fn){

  clearInterval(obj.timer);

  obj.timer=setInterval(function(){

  for(var attr in json){

    var icur=0;

    var flag=true;

    if(attr=="opacity"){

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

      }

      else{

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

      }

     var speed=(json[attr]-icur)/8;

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

     if(icur!=json[attr])

     {flag=false;

       }

     if(attr=="opacity"){

      obj.style.filter="alpha:(opacity:"+icur+speed+")";

      obj.style.opacity=(icur+speed)*100;

       }

      else{

       obj.style[attr]=icur+speed+"px";

      }

     if(flag){

       clearInterval(obj.timer);

      if(fn){fn();

        }

      }

    }

  },30)

}


我背后有个胖子
浏览 1453回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP