为什么我这个鼠标移上去透明度没有反应,可以帮我看一下吗?

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

慕码人1183263

2017-01-15 18:22

<html>
<head>
   <meta charset="utf-8">
   <title>test</title>
   <style>
       div{
           background:red;
           width:200px;
           height:200px;
           filter:alpha(opacity:30);
           opacity:0.3;
           margin:30px;
       }
   </style>
   <script>

   window.onload = function () {
       var div = document.getElementsByTagName("div");
       for(var i=0;i<div.length;i++){
           div[i].alpha = 30;
           div[i].timer = null;
           div[i].onmouseover = function () {
               start(this,100);
           };
           div[i].onmouseout = function () {
               start(this,30);
           };
       }
   };
   function start(obj,target){
       var speed = 0;
       clearInterval(obj.timer);
       obj.timer = setInterval(function () {
           if(obj.alpha > target)
               { speed = -10;}
           else
               { speed = 10;}

           if(target == obj.alpha)
           {clearInterval(obj.timer);}
           else{
                   obj.alpah += speed;
                   obj.style.filter = "alpha(opacity:" + obj.alpah + ");";
                   obj.style.opacity = obj.alpha/100;
               }
       },30);
   }

   </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

写回答 关注

1回答

  • cccryst
    2017-01-15 20:38:51
    已采纳

    代码第42、43行,alpha单词拼写错误:

    obj.alpah += speed;
    obj.style.filter = "alpha(opacity:" + obj.alpah + ");";

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题