运行下面的代码,大神们看看哪里错了,为什么透明度总是最后变成0?

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

qq_任重道远_1

2016-05-17 14:01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>透明度</title>

<style>

div{

width:200px;

height:200px;

background:#F00;

opacity:1;

}

    </style>

    <script>

window.onload=function(){

var div=document.getElementsByTagName('div')[0];

var tmd;

var timer=null;

div.onmouseover=function(){

biantmd();

}

function biantmd(){

tmd=1;

clearInterval(timer);

timer=setInterval(function(){

if(tmd==0.3){

clearInterval(timer);

}else{

tmd=tmd-0.01;

div.style.opacity=tmd;

}

//clearInterval(timer);

},300);

}

}

    </script>

</head>


<body>

<div></div>

</body>

</html>


写回答 关注

1回答

  • qq_安静时刻_0
    2016-05-17 17:50:05

    是那个tmd == 0.3 的原因,你改成 tmd< 0.3最后就不会显示透明了,具体原因你可以在计时器中输出tmd的值看看你就明白了。

JS动画效果

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

113923 学习 · 1443 问题

查看课程

相似问题