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

泪崩!这js弄了一天都没弄好,求助!

代码如下,希望大家看完别告诉我:在我的浏览器下能执行啊。{:10_266:} {:10_266:} {:10_266:} 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.timer = null;
          oImg.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处。
话说回来,提醒大家一下,浏览器的审查元素功能我已经试过了,没有报错。@小甲鱼 @不二如是

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

我先看到第一句:html>{:10_266:}

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

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

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

复制时少了一点。。。{:10_254:} {:10_256:} {:10_264:}

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

有时候连我自己都不得不佩服自己{:10_256:}



<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.timer = null;
          oImg.alpha = 100;
      }
               
      for (var i = 0;i < oImg.length;i++)
      {
          oImg.onmouseover=function ()
          {
            startMove(this,300);
          };
          oImg.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
如果我告诉你,在我的浏览器下无法执行。你会怎么想?

那我劝你还是回家种田吧,别学什么编程了{:10_247:}

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

不二如是 发表于 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.onmouseover=function ()
            {
                stratMove(this,300);
            };
            oImg.onmouseout=function ()
            {
                stratMove (this,30);
            };

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

综上所述,这段代码就修改为:
oImg.onmouseover=function ()
            {
                startMove(this,300);
            };
            oImg.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
页: [1]
查看完整版本: 泪崩!这js弄了一天都没弄好,求助!