要实现这样的效果,仅是用CSS是完成不了的,需要通过JavaScript来进行控制。我们看下面的JavaScript脚本:
Example Source Code []
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",40)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity =5
else if (window.highlighting)
clearInterval(highlighting)
}
这段脚本实现了图片的渐渐显示的清楚。我们在插入图片的代码中,将图片的初始透明底设置的低一些,并设置鼠标事件,可以触动脚本的运行。看下面的代码:
Example Source Code []
<img onMouseOut=low(this) onMouseOver=high(this) src="/uploads/divcss/logo3.gif" alt="" width="200" height="90" />
在上面的代码中:style='FILTER: alpha(opacity=20)' 即设置了图片的初始透明度。
我们看最终的运行效果:
Source Code to Run []
[ 可先修改部分代码 再运行查看效果 ]
怎么样,感觉不错吧。我们在实际应用中,进行一些细化,颜色进行一些调整,就可以做出非常酷炫的效果了!