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

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

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

　　這個(gè)jquery特效的原理是：鼠標(biāo)滑過(guò)當(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)滑過(guò)當(dāng)前元素，找到他的同輩元素i,并為它加上opacity_bg類 },function(){ $(this).siblings().find("i").removeClass("opacity_bg"); //鼠標(biāo)移出當(dāng)前元素，到他的同輩元素i,并移除它加上opacity_bg類景 })})

　　運(yùn)行效果如下圖所示：

　　代碼如下:

jquery聚光燈效果----無(wú)效果請(qǐng)刷新

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

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

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

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

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

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

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

圖片的使用技巧07-12

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

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

CAD如何插入圖片05-03

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

冬至qq祝福圖片06-17