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