AI闁诲繐绻愮换妤佺閿燂拷 闂佺厧鐤囧Λ鍕疮閹炬潙顕辨慨妯块哺閺嗭拷
闂佺硶鏅濋崰搴ㄥ箖閿燂拷
闂佽浜介崝蹇撶暦閿燂拷CSS JavaScript打造鼠标悬停图片渐显效果！_DIV+CSS实例
教程Tag：暂无Tag,欢迎添加,赚取U币!
缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹 缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷 闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!
我们在上网的时候，经常会见到一种图片渐显的效果：在正常状态下，图片呈低透明的状态，即透明度比较低看上去是一种朦胧的效果，而当鼠标移上去的时候，图片渐渐的显示的清楚起来。这样的效果是怎么做出来的呢，我们今天来看这个实例。要实现这样的效果，仅是用CSS是完成不了的，需要通过JavaScript来进行控制。我们看下面的JavaScript脚本：
示例代码 [www.mb5u.com]
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)
}
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)
}
这段脚本实现了图片的渐渐显示的清楚。我们在插入图片的代码中，将图片的初始透明底设置的低一些，并设置鼠标事件，可以触动脚本的运行。看下面的代码：
示例代码 [www.mb5u.com]
<img onMouseOut=low(this) onMouseOver=high(this) style='FILTER: alpha(opacity=20)' src="/uploads/divcss/logo3.gif" alt="www.mb5u.com" width="200" height="90" />
在上面的代码中：style='FILTER: alpha(opacity=20)' 即设置了图片的初始透明度。
我们看最终的运行效果：
代码调试框 [www.mb5u.com]怎么样，感觉不错吧。我们在实际应用中，进行一些细化，颜色进行一些调整，就可以做出非常酷炫的效果了！
评论加载中....相关DIV+CSS实例：
- 相关链接：
- 教程说明：
DIV+CSS实例-CSS JavaScript打造鼠标悬停图片渐显效果！
。