Posted on 2006-08-05 14:48
兵临城下 阅读(764)
评论(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 />那行，对象不支持此属性或方法。
调了好久也没成功，特来向大家请教！