jQuery實(shí)現(xiàn)圖片高亮顯示
更新時(shí)間：2021年10月21日 11:49:13 作者：`Pluto.
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)圖片高亮顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
圖片高亮顯示在頁(yè)面中很常見(jiàn)，下面是用jquery實(shí)現(xiàn)圖片高亮顯示的效果
html代碼部分
<body> <div> /*添加圖片*/ <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/5.jpg"> <img src="img/6.jpg"> </div> </body>
CSS代碼部分
<style>
html{background:#000;}
div{
width:700px;
height:410px;
border:1px solid #ddd;
margin:50px auto;
padding:0 20px;
}
div img{
margin: 10px 10px 0 20px;
}
</style>
jQuery代碼部分
<script>
// 給大盒子添加hover事件
$("div").hover(function(){
// 給每個(gè)img添加hover事件
$("img").hover(function(){
// 給當(dāng)前img添加動(dòng)動(dòng)畫(huà)改變透明度
$(this).stop(true).animate({opacity:1},100)
$(this).siblings().stop(true).animate({opacity:.5})
})
})
// 當(dāng)鼠標(biāo)移開(kāi)大盒子時(shí)添加動(dòng)畫(huà)改變透明度
$("div").mouseout(function(){
$("img").animate({opacity:1},100)
})
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個(gè)美觀,而且功能強(qiáng)大的表格,支持排序、分頁(yè)、多表頭、固定列等等2012-01-01
在jQuery里有一個(gè)each方法，用起來(lái)非常的爽，不用再像原來(lái)那樣寫for循環(huán)，下面介紹each的幾種常用的用法2014-01-01
基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
這篇文章主要介紹了基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單，代碼簡(jiǎn)單易懂，需要的朋友參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)炸裂輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
以下為myeclipse安裝jQuery插件的安裝步驟，需要的朋友可以參考下。2011-03-03
jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼
這篇文章主要介紹了jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了jQuery中$.extend()用法,實(shí)例分析了extend()方法的功能、定義及相關(guān)的使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery增加與刪除table列的方法,涉及jQuery針對(duì)table表格元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-03-03
本文將為大家介紹下在jtable列中如何自定義button，下面有一個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-11-11
本篇文章主要是對(duì)Jquery獲得控件值的三種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02