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