CSS JavaScript打造鼠標(biāo)懸停圖片漸顯效果!_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
我們?cè)谏暇W(wǎng)的時(shí)候,經(jīng)常會(huì)見到一種圖片漸顯的效果:在正常狀態(tài)下,圖片呈低透明的狀態(tài),即透明度比較低看上去是一種朦朧的效果,而當(dāng)鼠標(biāo)移上去的時(shí)候,圖片漸漸的顯示的清楚起來(lái)。這樣的效果是怎么做出來(lái)的呢,我們今天來(lái)看這個(gè)實(shí)例。
要實(shí)現(xiàn)這樣的效果,僅是用CSS是完成不了的,需要通過(guò)JavaScript來(lái)進(jìn)行控制。我們看下面的JavaScript腳本:
這段腳本實(shí)現(xiàn)了圖片的漸漸顯示的清楚。我們?cè)诓迦雸D片的代碼中,將圖片的初始透明底設(shè)置的低一些,并設(shè)置鼠標(biāo)事件,可以觸動(dòng)腳本的運(yùn)行�?聪旅娴拇a:
在上面的代碼中:style='FILTER: alpha(opacity=20)' 即設(shè)置了圖片的初始透明度。
我們看最終的運(yùn)行效果:
代碼調(diào)試框 [hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
怎么樣,感覺不錯(cuò)吧。我們?cè)趯?shí)際應(yīng)用中,進(jìn)行一些細(xì)化,顏色進(jìn)行一些調(diào)整,就可以做出非�?犰诺男Ч耍�
要實(shí)現(xiàn)這樣的效果,僅是用CSS是完成不了的,需要通過(guò)JavaScript來(lái)進(jìn)行控制。我們看下面的JavaScript腳本:
示例代碼 [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)
}
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)
}
這段腳本實(shí)現(xiàn)了圖片的漸漸顯示的清楚。我們?cè)诓迦雸D片的代碼中,將圖片的初始透明底設(shè)置的低一些,并設(shè)置鼠標(biāo)事件,可以觸動(dòng)腳本的運(yùn)行�?聪旅娴拇a:
示例代碼 [hl5o.cn]
<img onMouseOut=low(this) onMouseOver=high(this) style='FILTER: alpha(opacity=20)' src="/uploads/divcss/logo3.gif" alt="hl5o.cn" width="200" height="90" />
在上面的代碼中:style='FILTER: alpha(opacity=20)' 即設(shè)置了圖片的初始透明度。
我們看最終的運(yùn)行效果:
代碼調(diào)試框 [hl5o.cn][ 可先修改部分代碼 再運(yùn)行查看效果 ]
怎么樣,感覺不錯(cuò)吧。我們?cè)趯?shí)際應(yīng)用中,進(jìn)行一些細(xì)化,顏色進(jìn)行一些調(diào)整,就可以做出非�?犰诺男Ч耍�
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大�。�
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- CSS基礎(chǔ)實(shí)例:CSS實(shí)現(xiàn)帶背景圖片的文字鏈接的方法
- 用“ul li”及css制作韓國(guó)風(fēng)格菜單
- css背景漸變的技巧與方法
- DIV CSS布局入門示例(五)border和clear
- Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁(yè)布局Google首頁(yè)
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- CSS實(shí)例:如何讓無(wú)空格的長(zhǎng)字符在IE和FF下面實(shí)現(xiàn)自動(dòng)換行?
- CSS實(shí)例:常用的CSS隱藏文字的方法
- CSS實(shí)例:無(wú)懈可擊的CSS圓角技術(shù)!
- jquery模擬瀏覽器滾動(dòng)條效果
- 相關(guān)鏈接:
- 教程說(shuō)明:
DIV+CSS實(shí)例-CSS JavaScript打造鼠標(biāo)懸停圖片漸顯效果!
。