jQuery實(shí)現(xiàn)圖片高亮顯示
更新時間：2021年10月21日 11:49:13 作者：`Pluto.
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)圖片高亮顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
圖片高亮顯示在頁面中很常見，下面是用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(){
// 給每個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)文章
jquery $(document).ready() 與window.onload的區(qū)別
Jquery中$(document).ready()的作用類似于傳統(tǒng)JavaScript中的window.onload方法，不過與window.onload方法還是有區(qū)別的。2009-12-12
全選、全非選即取得被選中的值在日常開發(fā)應(yīng)用中很廣泛，下面有個不錯的示例，大家可以感受下2013-11-11
JqueryUI作為一個優(yōu)秀的前端庫，在項(xiàng)目中經(jīng)常會用到，下面小編抽點(diǎn)時間給大家介紹jQueryUI中的datepicker使用方法詳解，一起看看吧2016-05-05
jQuery中綁定事件bind() on() live() one()的異同
本文主要介紹了jQuery中綁定事件bind() on() live() one()的異同，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
jquery實(shí)現(xiàn)表格行的上下移動和置頂
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行的上下移動和置頂，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
jquery實(shí)現(xiàn)自定義圖片裁剪功能【推薦】
本文主要介紹了jquery實(shí)現(xiàn)自定義圖片裁剪功能，代碼超級簡單，易修改。下面跟著小編一起來看下吧2017-03-03
jquery表格內(nèi)容篩選實(shí)現(xiàn)思路及代碼
基于jquery實(shí)現(xiàn)表格內(nèi)容篩選，本文采用兩種方式實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)jquery篩選有所幫助2013-04-04
在高版本的jquery引入prop方法后，什么時候該用prop？什么時候用attr？它們兩個之間有什么區(qū)別？這些問題就出現(xiàn)了。下面這篇文章主要給大家介紹了Jquery中attr與prop區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
Jquery Ajax.ashx 高效分頁實(shí)現(xiàn)代碼
Jquery ，大家都熟悉的一個框架，我對Jquery正在學(xué)習(xí)中，對其影響最深的當(dāng)屬 它的選擇器之強(qiáng),ajax與服務(wù)器之間的交談2009-10-10
jquery實(shí)現(xiàn)拖拽table表頭改變列寬
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)拖拽table表頭改變列寬，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02