這篇文章主要介紹jQuery怎么實現圖片高亮顯示，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
圖片高亮顯示在頁面中很常見，下面是用jquery實現圖片高亮顯示的效果
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(){
// 給當前img添加動動畫改變透明度
$(this).stop(true).animate({opacity:1},100)
$(this).siblings().stop(true).animate({opacity:.5})
})
})
// 當鼠標移開大盒子時添加動畫改變透明度
$("div").mouseout(function(){
$("img").animate({opacity:1},100)
})
</script>以上是“jQuery怎么實現圖片高亮顯示”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
