设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 泪崩！这js弄了一天都没弄好，求助！
返回列表 发新帖
查看: 3364|回复: 8

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

[复制链接]
1314xxxxxx
发表于 2017-7-9 18:24:08 | 显示全部楼层 |阅读模式

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

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

x
代码如下，希望大家看完别告诉我：在我的浏览器下能执行啊。
  1. html>
  2. 该程序是用来给5张图片添加淡入淡出效果。就是如果把鼠标移到图片上，图片就会清晰，移开就会淡化。
  3.   <head>
  4.     <title>多个div淡入淡出</title>
  5.     <style>
  6.       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 }
  7.     </style>
  8.     <script>
  9.       function startMove(obj, iTarget)
  10.       {
  11.           clearInterval(obj.timer);
  12.           obj.timer=setInterval(function (){
  13.           var speed=(iTarget-obj.alpha)/6;
  14.           speed=speed>0?Math.ceil(speed):Math.floor(speed);
  15.                
  16.           if(obj.alpha==iTarget)
  17.           {
  18.             clearInterval(obj.timer);
  19.           }
  20.           else
  21.           {
  22.             obj.alpha+=speed;
  23.                        
  24.             obj.style.filter='alpha(opacity:'+obj.alpha+')';
  25.             obj.style.opacity=obj.alpha/100;
  26.           };
  27.         },30);
  28.       }
  29.       window.onload=function ()
  30.       {
  31.         var oImg = document.getElementsByTagName("img");
  32.         for (var i = 0;i < oImg.length;i++)
  33.         {
  34.           oImg[i].timer = null;
  35.           oImg[i].alpha = 30;
  36.         }
  37.         for (var i = 0;i < oImg.length;i++)
  38.         {
  39.           oImg.onmouseover=function ()
  40.           {
  41.             stratMove(this,300);
  42.           };
  43.           oImg.onmouseout=function ()
  44.           {
  45.             stratMove (this,30);
  46.           };
  47.         }
  48.       };
  49.         
  50.       
  51.    
  52.     </script>
  53.   </head>
  54.   <body>
  55.     <img src="1.jpg" />
  56.     <img src="2.jpg" />
  57.     <img src="3.jpg" />
  58.     <img src="4.jpg" />
  59.     <img src="5.jpg" />
  60.   </body>                                   
  61. </html>
复制代码

反正我看着是找不出什么错误。。。至于分号嘛，我试过加上分号了，然而并没有卵用。
我觉得错误应该在window.onload处。
话说回来，提醒大家一下，浏览器的审查元素功能我已经试过了，没有报错。@小甲鱼 @不二如是
最佳答案
月排行榜 / 总排行榜
ba21
2017-7-9 18:52:40
有时候连我自己都不得不佩服自己
2017-07-09_185048.png


  1. <html>
  2. 该程序是用来给5张图片添加淡入淡出效果。就是如果把鼠标移到图片上，图片就会清晰，移开就会淡化。
  3.   <head>
  4.     <title>多个div淡入淡出</title>
  5.     <style>
  6.       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 }
  7.     </style>
  8.     <script>
  9.       function startMove(obj,iTarget)
  10.       {
  11.           clearInterval(obj.timer);
  12.           obj.timer=setInterval(function (){
  13.           var speed=(iTarget-obj.alpha)/6;
  14.           speed=speed>0?Math.ceil(speed):Math.floor(speed);
  15.                
  16.           if(obj.alpha==iTarget)
  17.           {
  18.             clearInterval(obj.timer);
  19.           }
  20.           else
  21.           {
  22.             obj.alpha+=speed;
  23.                         
  24.             obj.style.filter='alpha(opacity:'+obj.alpha+')';
  25.             obj.style.opacity=obj.alpha/100;
  26.           };
  27.         },30);
  28.       }
  29.       window.onload=function ()
  30.       {
  31.         var oImg = document.getElementsByTagName("img");
  32.                
  33.         for (var i = 0;i < oImg.length;i++)
  34.         {
  35.           oImg[i].timer = null;
  36.           oImg[i].alpha = 100;
  37.         }
  38.                
  39.         for (var i = 0;i < oImg.length;i++)
  40.         {
  41.           oImg[i].onmouseover=function ()
  42.           {
  43.             startMove(this,300);
  44.           };
  45.           oImg[i].onmouseout=function ()
  46.           {
  47.             startMove (this,30);
  48.           };
  49.         }
  50.                
  51.       };
  52.     </script>
  53.   </head>
  54.   <body>
  55.     <img src="1.jpg" />
  56.     <img src="2.jpg" />
  57.     <img src="3.jpg" />
  58.     <img src="4.jpg" />
  59.     <img src="5.jpg" />
  60.   </body>                                   
  61. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

小甲鱼
发表于 2017-7-9 18:31:29 | 显示全部楼层
我先看到第一句：html>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-9 18:50:46 | 显示全部楼层
本帖最后由 1314xxxxxx 于 2017-7-9 18:54 编辑

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


复制时少了一点。。。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2017-7-9 18:52:40 | 显示全部楼层    本楼为最佳答案   
有时候连我自己都不得不佩服自己
2017-07-09_185048.png


  1. <html>
  2. 该程序是用来给5张图片添加淡入淡出效果。就是如果把鼠标移到图片上，图片就会清晰，移开就会淡化。
  3.   <head>
  4.     <title>多个div淡入淡出</title>
  5.     <style>
  6.       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 }
  7.     </style>
  8.     <script>
  9.       function startMove(obj,iTarget)
  10.       {
  11.           clearInterval(obj.timer);
  12.           obj.timer=setInterval(function (){
  13.           var speed=(iTarget-obj.alpha)/6;
  14.           speed=speed>0?Math.ceil(speed):Math.floor(speed);
  15.                
  16.           if(obj.alpha==iTarget)
  17.           {
  18.             clearInterval(obj.timer);
  19.           }
  20.           else
  21.           {
  22.             obj.alpha+=speed;
  23.                         
  24.             obj.style.filter='alpha(opacity:'+obj.alpha+')';
  25.             obj.style.opacity=obj.alpha/100;
  26.           };
  27.         },30);
  28.       }
  29.       window.onload=function ()
  30.       {
  31.         var oImg = document.getElementsByTagName("img");
  32.                
  33.         for (var i = 0;i < oImg.length;i++)
  34.         {
  35.           oImg[i].timer = null;
  36.           oImg[i].alpha = 100;
  37.         }
  38.                
  39.         for (var i = 0;i < oImg.length;i++)
  40.         {
  41.           oImg[i].onmouseover=function ()
  42.           {
  43.             startMove(this,300);
  44.           };
  45.           oImg[i].onmouseout=function ()
  46.           {
  47.             startMove (this,30);
  48.           };
  49.         }
  50.                
  51.       };
  52.     </script>
  53.   </head>
  54.   <body>
  55.     <img src="1.jpg" />
  56.     <img src="2.jpg" />
  57.     <img src="3.jpg" />
  58.     <img src="4.jpg" />
  59.     <img src="5.jpg" />
  60.   </body>                                   
  61. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-9 18:56:29 | 显示全部楼层
本帖最后由 1314xxxxxx 于 2017-7-9 20:30 编辑
ba21 发表于 2017-7-9 18:52
有时候连我自己都不得不佩服自己


如果我告诉你，在我的浏览器下无法执行。你会怎么想？哈哈，开个玩笑。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2017-7-9 18:59:17 | 显示全部楼层
本帖最后由 ba21 于 2017-7-9 19:01 编辑
1314xxxxxx 发表于 2017-7-9 18:56
如果我告诉你，在我的浏览器下无法执行。你会怎么想？


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

还有一点就是你提问题，别人来解答；请你也懂得感恩。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2017-7-9 19:25:31 | 显示全部楼层
本帖最后由 不二如是 于 2017-7-9 19:26 编辑

7月-09-2017 19-18-52.gif


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

两个问题：

出错代码：
  1.   for (var i = 0;i < oImg.length;i++)
  2.         {
  3.             oImg.onmouseover=function ()
  4.             {
  5.                 stratMove(this,300);
  6.             };
  7.             oImg.onmouseout=function ()
  8.             {
  9.                 stratMove (this,30);
  10.             };
  11.         }
复制代码


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

修改如下：
  1. oImg[i].onmouseover=function ()
  2.             {
  3.                 stratMove(this,300);
  4.             };
  5.             oImg[i].onmouseout=function ()
  6.             {
  7.                 stratMove (this,30);
  8.             };
复制代码


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

综上所述，这段代码就修改为：
  1.   oImg[i].onmouseover=function ()
  2.             {
  3.                 startMove(this,300);
  4.             };
  5.             oImg[i].onmouseout=function ()
  6.             {
  7.                 startMove (this,30);
  8.             };
复制代码





友情提示：

1、善用Chrome的控制台

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-9 21:21:18 | 显示全部楼层
不二如是 发表于 2017-7-9 19:25
原谅我私自换了下图片（这不是重点）

两个问题：

每次我都用Chrome的控制台。。。然后看到一堆拼写错误。。。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

1314xxxxxx
 楼主| 发表于 2017-7-9 21:22:34 | 显示全部楼层
ba21 发表于 2017-7-9 18:59
那我劝你还是回家种田吧，别学什么编程了

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

Thank you
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 02:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表