鼠标离开之后为什么一直闪烁

来源:2-2 JS透明度动画

qq_浮世_4

2016-12-21 13:00

<!doctype html>

<html>

<head>

<style>

*{margin:0;padding:0;}

#div1{width:200px;height: 200px;background: red;opacity:0.3;filter:alpha(opacity:30)};

</style>

<script type="text/javascript">

window.onload=function(){

var oDiv=document.getElementById("div1");

oDiv.onmouseover=function(){

startMove(1);

}

oDiv.onmouseout=function(){

startMove(0.3);

}

}

var int=null;

var alpha=0.3;

function startMove(iTarget){

var oDiv=document.getElementById("div1");

clearInterval(int);

int=setInterval(function(){

   var speed=0;

   if(alpha>iTarget)

   {

    speed=-0.1;

   }

   else

   {

    speed=0.1;

   }


if(alpha==iTarget)

{

clearInterval(int);

}

else

{

            alpha+=speed;

            oDiv.style.opacity=alpha;

}

},30)

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>


写回答 关注

2回答

  • PurpleNight
    2017-02-20 21:36:08

    应该是你的值有问题,后面的课程有讲到  取值的时候有问题,你打开页面开发者工具发现最后的值是浮动变化的

  • qq_浮世_4
    2016-12-21 13:13:10

    追问一下,if(alpha>iTarget)为什么不是>=,我都试了,两个都行,但是只是大于的话,30>30是不成立的,速度应该变为正了

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题