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 />那行,对象不支持此属性或方法。
调了好久也没成功,特来向大家请教!