明月松间照 清泉石上流


                                        ——— 兵临城下   猫科动物
posts - 70, comments - 137, trackbacks - 0, articles - 23
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

又是JS的问题!最近研究中……

Posted on 2006-08-05 14:48 兵临城下 阅读(763) 评论(7)  编辑  收藏 所属分类: JavaScript

         最近想实现一个图片的渐显渐无的JS程序,就是鼠标移到上面图片逐渐清晰,鼠标移走图片逐渐消失。有点问题向大家请教。
         相关代码如下:
        图片代码: <img src="liuting.jpg" width="339" height="450" onmouseover="high(this)" onmouseout="low(this)" style="FILTER: alpha(opacity=15)"/>
         JS方法:
         function high(imgHigh){
              high = imgHigh;
              if(typeof(lowlighting) != "undefined") clearInterval(lowlighting);
              highlighting=setInterval("highlightit(high)",100);
         }

         function low(imgLow){
               low=imgLow;
               clearInterval(highlighting);
                lowlighting = setInterval("lowLight(low)",100);
         }

         function highlightit(img){
             if(img.filters.alpha.opacity < 200) {
              img.filters.alpha.opacity += 5;
             }
             //else if (window.highlighting)
              //clearInterval(highlighting);
         }
         function lowLight(img) {
             if(img.filters.alpha.opacity > 15)
                    img.filters.alpha.opacity -= 5;
             //else if (window.lowlighting)
              //clearInterval(lowlighting);
         }
         网页打开后,第一次鼠标移上去渐清晰,移走后也正常逐渐消失,都很正常。可当我再次把鼠标移到图片上时,就没有反应了,在移出图片时JS报错,说在<img />那行,对象不支持此属性或方法。
        调了好久也没成功,特来向大家请教!


评论

# re: 又是JS的问题!最近研究中……  回复  更多评论   

2006-08-05 19:52 by hahahehe
问题出在你第二次把鼠标移动上去时你的high和low早已经不是函数了,你看看你做了什么,high = imgHigh;low=imgLow;你的函数变成了image对象,当然会出错,你改一下
function high(imgHigh){
haha = imgHigh;
if(typeof(lowlighting) != "undefined") clearInterval(lowlighting);
highlighting=setInterval("highlightit(high)",100);
}

function low(imgLow){
hehe = imgLow;
clearInterval(highlighting);
lowlighting = setInterval("lowLight(low)",100);
}
这样应该ok了

# re: 又是JS的问题!最近研究中……  回复  更多评论   

2006-08-05 19:54 by hahahehe
噢,没改完
highlighting=setInterval("highlightit(haha)",100);

lowlighting = setInterval("lowLight(hehe)",100);

# re: 又是JS的问题!最近研究中……  回复  更多评论   

2006-08-06 18:16 by 兵临城下
hahahehe!多谢了,几次问题都是在你的帮助下得以解决,学到不少东西!
以后有问题一定向你请教!

# re: 又是JS的问题!最近研究中……  回复  更多评论   

2006-08-06 18:46 by 兵临城下
在hahahehe提醒后,觉得是有点问题。但感觉JS中语法的却不太严谨,方法名居然会和img名搞混。JS引擎解析时,方法和变量是同等对待的,而且我再high()方法中没有申明直接使用的high变量是全局的吗?

刚在修改这个JS的时候,我这样用为什么不行?
function high(imgHigh){
//haha = imgHigh; 将此行注释
if(typeof(lowlighting) != "undefined") clearInterval(lowlighting);
highlighting=setInterval("highlightit(imgHIgh)",100); //相应更换,直接使用参数
}

function low(imgLow){
//hehe = imgLow; 将此行注释
clearInterval(highlighting);
lowlighting = setInterval("lowLight(imgLow)",100); // 相应更换,直接使用参数
}

为什么不行呢?提示找不到imgLow。难道传过来的参数作用域是局部的,而且参数传的是引用,不是值?
也许是受JAVA的影响,有点迷糊了!呵呵

# re: 又是JS的问题!最近研究中……  回复  更多评论   

2006-08-06 20:34 by hahahehe
setInterval函数比较奇怪,它只认识全局变量,不认识局部变量,上面的haha和hehe没用var来修饰,所以他们是全局变量,你传过来的参数是局部变量,所以它不认识,setInterval的第一个参数除了可以是string之外,也可以就是一个function,是字符串的话它就把这个字符串当作代码来执行一遍,如果是function的话,它就调用这个函数,但这样有一个问题,你没法给这个function 传参数
比如setInterval("f()", 1000)和setInterval(f, 1000),他们的作用是一样的,但是如果函数f需要一个参数,前面的你可以写成setInterval("f(1)", 1000),而后面的那种方法就行不通了,但是前面的那种形式你的参数必须是一个全局的,所以也不是很爽,可以把后面的那种形式变通一下,让它支持参数,因此我写了一个函数bind,它返回一个函数
function bind(func, args) {
return function() {
func.apply(null, args);
};
}
注意函数变量的方法apply的第二个参数要求是一个数组,那么你的
highlighting=setInterval("highlightit(imgHIgh)",100);
可以写成这样
highlighting=setInterval(bind(highlightit, [imgHIgh]), 100);
这样你就不用担心局部还是全局的问题了,hoho

# re: 又是JS的问题!最近研究中……  回复  更多评论   

2006-08-06 22:04 by 兵临城下
就setInterval只认全局变量,一般其他的方法就可以使用局部变量?
如果这样你的自定义方法不错,是个解决办法!

# re: 又是JS的问题!最近研究中……  回复  更多评论   

2006-08-11 12:36 by hahahehe
反正把代码直接写到字符串里然后执行它就是一点奇怪,setInterval就是例子 "highlightit(imgHIgh)",它居然不认识参数imgHIgh,我也懒得去管它这个怪异的执行字符串表达式的功能,还是写一个函数在那里比较放心

只有注册用户登录后才能发表评论。


网站导航: