日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

CSS JavaScript打造鼠標(biāo)懸停圖片漸顯效果!_DIV+CSS實例

編輯Tag賺U幣
教程Tag:暫無Tag,歡迎添加,賺取U幣!
  我們在上網(wǎng)的時候,經(jīng)常會見到一種圖片漸顯的效果:在正常狀態(tài)下,圖片呈低透明的狀態(tài),即透明度比較低看上去是一種朦朧的效果,而當(dāng)鼠標(biāo)移上去的時候,圖片漸漸的顯示的清楚起來。這樣的效果是怎么做出來的呢,我們今天來看這個實例。
  要實現(xiàn)這樣的效果,僅是用CSS是完成不了的,需要通過JavaScript來進行控制。我們看下面的JavaScript腳本:

示例代碼 [www.hl5o.cn]
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)
}

  這段腳本實現(xiàn)了圖片的漸漸顯示的清楚。我們在插入圖片的代碼中,將圖片的初始透明底設(shè)置的低一些,并設(shè)置鼠標(biāo)事件,可以觸動腳本的運行�?聪旅娴拇a:

示例代碼 [www.hl5o.cn]
<img onMouseOut=low(this) onMouseOver=high(this) style='FILTER: alpha(opacity=20)' src="/uploads/divcss/logo3.gif" alt="www.hl5o.cn" width="200" height="90" />

  在上面的代碼中:style='FILTER: alpha(opacity=20)' 即設(shè)置了圖片的初始透明度。

  我們看最終的運行效果:

div css xhtml xml 代碼調(diào)試框 代碼調(diào)試框 [www.hl5o.cn]

[ 可先修改部分代碼 再運行查看效果 ]

  怎么樣,感覺不錯吧。我們在實際應(yīng)用中,進行一些細化,顏色進行一些調(diào)整,就可以做出非�?犰诺男Ч�!

來源:無憂整理//所屬分類:DIV+CSS實例/更新時間:2007-05-03
相關(guān)DIV+CSS實例