CSS JavaScript打造鼠標懸停圖片漸顯效果！_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
我們在上網的時候，經常會見到一種圖片漸顯的效果：在正常狀態下，圖片呈低透明的狀態，即透明度比較低看上去是一種朦朧的效果，而當鼠標移上去的時候，圖片漸漸的顯示的清楚起來。這樣的效果是怎么做出來的呢，我們今天來看這個實例。
要實現這樣的效果，僅是用CSS是完成不了的，需要通過JavaScript來進行控制。我們看下面的JavaScript腳本：
這段腳本實現了圖片的漸漸顯示的清楚。我們在插入圖片的代碼中，將圖片的初始透明底設置的低一些，并設置鼠標事件，可以觸動腳本的運行。看下面的代碼：
在上面的代碼中：style='FILTER: alpha(opacity=20)' 即設置了圖片的初始透明度。
我們看最終的運行效果：
代碼調試框 [m.ghpqjb.com]
[ 可先修改部分代碼 再運行查看效果 ]
怎么樣，感覺不錯吧。我們在實際應用中，進行一些細化，顏色進行一些調整，就可以做出非常酷炫的效果了！
要實現這樣的效果，僅是用CSS是完成不了的，需要通過JavaScript來進行控制。我們看下面的JavaScript腳本：
示例代碼 [m.ghpqjb.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)
}
這段腳本實現了圖片的漸漸顯示的清楚。我們在插入圖片的代碼中，將圖片的初始透明底設置的低一些，并設置鼠標事件，可以觸動腳本的運行。看下面的代碼：
示例代碼 [m.ghpqjb.com]
<img onMouseOut=low(this) onMouseOver=high(this) style='FILTER: alpha(opacity=20)' src="/uploads/divcss/logo3.gif" alt="m.ghpqjb.com" width="200" height="90" />
在上面的代碼中：style='FILTER: alpha(opacity=20)' 即設置了圖片的初始透明度。
我們看最終的運行效果：
代碼調試框 [m.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
怎么樣，感覺不錯吧。我們在實際應用中，進行一些細化，顏色進行一些調整，就可以做出非常酷炫的效果了！
相關DIV+CSS實例：
- 相關鏈接：
- 教程說明：
DIV+CSS實例-CSS JavaScript打造鼠標懸停圖片漸顯效果！
。