请问这段代码哪里错了？
来源：2-2 JS透明度动画
慕桂英9545975
2016-05-06 11:36
原本的透明度为30的黄色方块，
要的效果是 用JS使鼠标移入透明度到100，
鼠标移出透明度恢复到30，
可是我的效果是反的，移入30移出100，IE和chrome都是这样，这是哪里错了？
PS：我把box.onmouseover里的100和box.onmouseout里的30对调时是对的，不知道为什么
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
<style type="text/css">
body,div{
padding:0;
margin:0;
font:normal 12px "微软雅黑"
}
#box{
width:200px;
height:150px;
background-color: gold;
top:0;
left:20px;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload=function() {
var box = document.getElementById("box");
box.onmouseover = function(){startMove(100)};
box.onmouseout =function(){startMove(30)};
};
var alpha=30,
timer=null;
function startMove(target){
clearInterval(timer);
var speed= 0;
if(alpha>target){
speed=-10;
}else{
speed=10;
}
timer=setInterval(function(){
if(alpha==target){
clearInterval(timer);
}else{
alpha+=speed;
}
},30);
var box = document.getElementById("box");
box.style.filter="alpha(opacity:"+alpha+");";
box.style.opacity=alpha/100;
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
写回答
关注
1回答
-
- 旭日A
- 2016-05-06 12:27:51
var box = document.getElementById("box");
box.style.filter="alpha(opacity:"+alpha+");";
box.style.opacity=alpha/100;
这最后三行代码要放在计时器setInterval的函数内啊
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113910 学习 · 1502 问题
相似问题