嗯...遍历了每个li列表没有透明度变化，是怎么回事呢
来源：4-1 JS多物体动画
suyicjack
2016-07-30 17:02
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>透明度改变</title>
<style type="text/css">
ul li{
list-style: none;
width: 100px;
height: 100px;
top: 0px;
background:purple;
filter:alpha(opacity:100);
opacity: 1;
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="alpha">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
var alphas=document.getElementsByTagName("li");
for (var i = 0; i < alphas.length; i++) {
alphas[i].timer;
alphas[i].opacity=100;
alphas[i].onmouseover=function(){
startMove(this,50);
}
alphas[i].onmouseout=function(){
startMove(this,100);
}
}
// var timer=null;
// var opacity=100;这里也应该为每个li列表单独设置否则会有bug
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=obj.opacity>iTarget?speed=-10:speed=10;
if (obj.opacity==iTarget) {
clearInterval(obj.timer);
}else{
obj.opacity+=speed;
obj.style.filter="alpha(opacity:"+obj.opacity+")";
obj.style.opacity=obj.opacity/100;
}
},30)
}
</script>
</body>
</html>
写回答
关注
1回答
-
- qq_17w
- 2016-07-30 20:34:08
在</script>前面少了一个大括号 }，加上就行了，还有这句alphas[i].timer;可以不要
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113925 学习 · 1443 问题
相似问题