[已解决]泪崩！这js弄了一天都没弄好，求助！

1314xxxxxx · 发表于 2017-7-9 18:24:08

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

代码如下，希望大家看完别告诉我：在我的浏览器下能执行啊。

html>
该程序是用来给5张图片添加淡入淡出效果。就是如果把鼠标移到图片上，图片就会清晰，移开就会淡化。
  <head>
    <title>多个div淡入淡出</title>
    <style>
      img { max-width:600px; myimg:expression(onload=function(){ this.style.width=(this.offsetWidth > 600)?"600px":"auto"});float:left;width:200px;filter:alpha(opacity;30);opacity:0.3 }
    </style>
    <script>
      function startMove(obj, iTarget)
      {
          clearInterval(obj.timer);
          obj.timer=setInterval(function (){
          var speed=(iTarget-obj.alpha)/6;
          speed=speed>0?Math.ceil(speed):Math.floor(speed);
                
          if(obj.alpha==iTarget)
          {
            clearInterval(obj.timer);
          }
          else
          {
            obj.alpha+=speed;
                        
            obj.style.filter='alpha(opacity:'+obj.alpha+')';
            obj.style.opacity=obj.alpha/100;
          };
        },30);
      }
      window.onload=function ()
      {
        var oImg = document.getElementsByTagName("img");
        for (var i = 0;i < oImg.length;i++)
        {
          oImg[i].timer = null;
          oImg[i].alpha = 30;
        }
        for (var i = 0;i < oImg.length;i++)
        {
          oImg.onmouseover=function ()
          {
            stratMove(this,300);
          };
          oImg.onmouseout=function ()
          {
            stratMove (this,30);
          };
        }
      };
        
      
   
    </script>
  </head>
  <body>
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    <img src="4.jpg" />
    <img src="5.jpg" />
  </body>                                   
</html>

反正我看着是找不出什么错误。。。至于分号嘛，我试过加上分号了，然而并没有卵用。
我觉得错误应该在window.onload处。
话说回来，提醒大家一下，浏览器的审查元素功能我已经试过了，没有报错。@小甲鱼 @不二如是

最佳答案

月排行榜 / 总排行榜

ba21

2017-7-9 18:52:40

有时候连我自己都不得不佩服自己

<html>
该程序是用来给5张图片添加淡入淡出效果。就是如果把鼠标移到图片上，图片就会清晰，移开就会淡化。
  <head>
    <title>多个div淡入淡出</title>
    <style>
      img { max-width:600px; myimg:expression(onload=function(){ this.style.width=(this.offsetWidth > 600)?"600px":"auto"});float:left;width:200px;filter:alpha(opacity;30);opacity:0.3 }
    </style>
    <script>
      function startMove(obj,iTarget)
      {
          clearInterval(obj.timer);
          obj.timer=setInterval(function (){
          var speed=(iTarget-obj.alpha)/6;
          speed=speed>0?Math.ceil(speed):Math.floor(speed);
                
          if(obj.alpha==iTarget)
          {
            clearInterval(obj.timer);
          }
          else
          {
            obj.alpha+=speed;
                        
            obj.style.filter='alpha(opacity:'+obj.alpha+')';
            obj.style.opacity=obj.alpha/100;
          };
        },30);
      }
      window.onload=function ()
      {
        var oImg = document.getElementsByTagName("img");
                
        for (var i = 0;i < oImg.length;i++)
        {
          oImg[i].timer = null;
          oImg[i].alpha = 100;
        }
                
        for (var i = 0;i < oImg.length;i++)
        {
          oImg[i].onmouseover=function ()
          {
            startMove(this,300);
          };
          oImg[i].onmouseout=function ()
          {
            startMove (this,30);
          };
        }
                
      };
    </script>
  </head>
  <body>
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    <img src="4.jpg" />
    <img src="5.jpg" />
  </body>                                   
</html>

跳转到最佳答案楼层

小甲鱼 · 发表于 2017-7-9 18:31:29

我先看到第一句：html>

1314xxxxxx · 发表于 2017-7-9 18:50:46

本帖最后由 1314xxxxxx 于 2017-7-9 18:54 编辑

@小甲鱼

小甲鱼发表于 2017-7-9 18:31
我先看到第一句：html>

复制时少了一点。。。

ba21 · 发表于 2017-7-9 18:52:40

有时候连我自己都不得不佩服自己

<html>
该程序是用来给5张图片添加淡入淡出效果。就是如果把鼠标移到图片上，图片就会清晰，移开就会淡化。
  <head>
    <title>多个div淡入淡出</title>
    <style>
      img { max-width:600px; myimg:expression(onload=function(){ this.style.width=(this.offsetWidth > 600)?"600px":"auto"});float:left;width:200px;filter:alpha(opacity;30);opacity:0.3 }
    </style>
    <script>
      function startMove(obj,iTarget)
      {
          clearInterval(obj.timer);
          obj.timer=setInterval(function (){
          var speed=(iTarget-obj.alpha)/6;
          speed=speed>0?Math.ceil(speed):Math.floor(speed);
                
          if(obj.alpha==iTarget)
          {
            clearInterval(obj.timer);
          }
          else
          {
            obj.alpha+=speed;
                        
            obj.style.filter='alpha(opacity:'+obj.alpha+')';
            obj.style.opacity=obj.alpha/100;
          };
        },30);
      }
      window.onload=function ()
      {
        var oImg = document.getElementsByTagName("img");
                
        for (var i = 0;i < oImg.length;i++)
        {
          oImg[i].timer = null;
          oImg[i].alpha = 100;
        }
                
        for (var i = 0;i < oImg.length;i++)
        {
          oImg[i].onmouseover=function ()
          {
            startMove(this,300);
          };
          oImg[i].onmouseout=function ()
          {
            startMove (this,30);
          };
        }
                
      };
    </script>
  </head>
  <body>
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    <img src="4.jpg" />
    <img src="5.jpg" />
  </body>                                   
</html>

1314xxxxxx · 发表于 2017-7-9 18:56:29

本帖最后由 1314xxxxxx 于 2017-7-9 20:30 编辑

ba21 发表于 2017-7-9 18:52
有时候连我自己都不得不佩服自己

如果我告诉你，在我的浏览器下无法执行。你会怎么想？哈哈，开个玩笑。

ba21 · 发表于 2017-7-9 18:59:17

本帖最后由 ba21 于 2017-7-9 19:01 编辑

1314xxxxxx 发表于 2017-7-9 18:56
如果我告诉你，在我的浏览器下无法执行。你会怎么想？

那我劝你还是回家种田吧，别学什么编程了

还有一点就是你提问题，别人来解答；请你也懂得感恩。

不二如是 · 发表于 2017-7-9 19:25:31

本帖最后由不二如是于 2017-7-9 19:26 编辑

原谅我私自换了下图片（这不是重点）

两个问题：

出错代码：

  for (var i = 0;i < oImg.length;i++)
        {
            oImg.onmouseover=function ()
            {
                stratMove(this,300);
            };
            oImg.onmouseout=function ()
            {
                stratMove (this,30);
            };
        }

1、既然是循环，那么oImg,就要指定“位置”，然后才能动起来，显然“oImg”，是不行滴～

修改如下：

oImg[i].onmouseover=function ()
            {
                stratMove(this,300);
            };
            oImg[i].onmouseout=function ()
            {
                stratMove (this,30);
            };

2、你上面明明定义了“startMove”，这里你调用的是”stratMove“.

综上所述，这段代码就修改为：

  oImg[i].onmouseover=function ()
            {
                startMove(this,300);
            };
            oImg[i].onmouseout=function ()
            {
                startMove (this,30);
            };

友情提示：

1、善用Chrome的控制台

1314xxxxxx · 发表于 2017-7-9 21:21:18

不二如是发表于 2017-7-9 19:25
原谅我私自换了下图片（这不是重点）

两个问题：

每次我都用Chrome的控制台。。。然后看到一堆拼写错误。。。

1314xxxxxx · 发表于 2017-7-9 21:22:34

ba21 发表于 2017-7-9 18:59
那我劝你还是回家种田吧，别学什么编程了

还有一点就是你提问题，别人来解答；请你也懂得 ...

Thank you

账号		自动登录	找回密码
密码			立即注册