實現(xiàn)jQuery鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法

　　本文實例講述了jQuery實現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法。分享給大家供大家參考。具體如下：

　　鼠標(biāo)滑向當(dāng)前圖片高亮顯示，其它圖片變灰 這個 網(wǎng)頁特效一些商城經(jīng)常用到比如淘寶，當(dāng)用戶鼠標(biāo)移到某一個圖片時候變亮 周圍圖片變灰，形成對比增加用戶體驗

　　這個jquery特效的原理是：鼠標(biāo)滑過當(dāng)前元素，找到他的同輩元素i,并為它加上opacity_bg類，鼠標(biāo)移出當(dāng)前元素，到他的同輩元素i,并移除它加上opacity_bg類景

　　核心js代碼如下：

　　$(document).ready(function(){ $("ul li").hover(function(){ $(this).siblings().find("i").addClass("opacity_bg"); //鼠標(biāo)滑過當(dāng)前元素，找到他的同輩元素i,并為它加上opacity_bg類 },function(){ $(this).siblings().find("i").removeClass("opacity_bg"); //鼠標(biāo)移出當(dāng)前元素，到他的同輩元素i,并移除它加上opacity_bg類景 })})

　　運行效果如下圖所示：

　　代碼如下:

jquery聚光燈效果----無效果請刷新

鼠標(biāo)滑向當(dāng)前圖片高亮顯示，其它圖片變灰

　　希望本文所述對大家的jquery程序設(shè)計有所幫助。

【實現(xiàn)jQuery鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法】相關(guān)文章：

關(guān)于jQuery實現(xiàn)高亮顯示的方法介紹08-20

關(guān)于jquery簡單圖片切換顯示效果實現(xiàn)方法介紹10-01

常用的手機(jī)產(chǎn)品展示圖片修方法07-15

實現(xiàn)鼠標(biāo)畫圖的Java程序06-22

圖片的使用技巧07-12

Win7系統(tǒng)批量圖片重命名方法01-04

J2ME插值算法如何實現(xiàn)圖片的放大縮小10-27

CAD如何插入圖片05-03

網(wǎng)站圖片優(yōu)化的技巧08-22

冬至qq祝福圖片06-17