求大神帮忙看看，为什么div的颜色没有变化-慕课网

求大神帮忙看看，为什么div的颜色没有变化

来源：4-1 JS多物体动画

慕勒0078764

2017-10-18 10:48

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body,div{
   margin = 0;
   padding = 0;
}
div{
   height: 200px;
   width: 200px;
   margin: 20px;
   float: left;
   background: red;
   filter:alpha(opacity:20); /* IE浏览器 */
   opacity:0.2; /* 火狐浏览器 */
}
</style>
<script type="text/javascript">
window.onload = function(){
   var oDiv = document.getElementsByTagName("div");
   for(var i = 0; i < oDiv.Length; i++){
       oDiv[i].alpha = 30;
       oDiv[i].timer = null;
       oDiv[i].onmouseover = function(){
           startmove(this,100);
       }
       oDiv[i].onmouseout = function(){
           startmove(this,30);
       }
   }
}
//var timer = null;
//var alpha = 30;
function startmove(obj,iTarger){
   //var oDiv = document.getElementById("div1");
   clearInterval(obj.timer);
   obj.timer = setInterval(function(){
       var speed = 0;
       if (obj.alpha > iTarger){
           speed = -10;
       }
       else{
           speed =10;
       }
       if(obj.alpha == iTarger){
           clearInterval(obj.timer);
       }
       else
       {
           obj.alpha = obj.alpha + speed;
           obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
           obj.style.opacity = obj.alpha/100;
       }
   }
           ,30);
}
</script>
</head>
<body>
<div id = div1></div>
<div id = div2></div>
<div id = div3></div>
</body>
</html>

写回答关注

2回答

莫892897612

2018-09-26 15:29:53

obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
这句错了，应该是obj.style.filter = 'obj.alpha(opacity:'+obj.alpha+')';

0 0
慕粉3512110

2018-06-01 15:05:02

for(var i = 0; i < oDiv.Length; i++) 这句里面的oDiv.Length应该改为oDiv.length.此处应是小写的l.

0 0

JS动画效果

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

113931 学习 · 1443 问题

查看课程

相似问题

求大神帮忙看看为什么没效果

回答 1

求大神帮忙看看为什么没有移动进去？

回答 2

求大神帮忙看看

回答 1

求大神帮忙看看

回答 2

求大神帮忙看看为啥不能运行呢！！！！！！

回答 2

打开慕课网App查看更多内容