jQuery實(shí)現(xiàn)手風(fēng)琴效果的方法

這篇文章給大家分享的是有關(guān)jQuery實(shí)現(xiàn)手風(fēng)琴效果的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

目前創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、宜章網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

 jQuery中主要通過(guò)鼠標(biāo)滑入或滑出時(shí)給animate設(shè)置寬度來(lái)實(shí)現(xiàn)手風(fēng)琴效果

今天將和大家介紹如何使用jQuery來(lái)實(shí)現(xiàn)手風(fēng)琴效果也就是當(dāng)鼠標(biāo)進(jìn)入時(shí)會(huì)擴(kuò)展，滑出時(shí)會(huì)變小的效果

jQuery實(shí)現(xiàn)手風(fēng)琴效果的方法

實(shí)現(xiàn)手風(fēng)琴效果所需要的知識(shí)點(diǎn)

（1）通過(guò)for循環(huán)來(lái)遍歷所有的圖片，利用jQuery中eq()方法選擇li標(biāo)簽給他添加背景圖片

eq(index)方法：指示元素的位置（最小為 0），如果為負(fù)數(shù)，則從集合中的最后一個(gè)元素往回計(jì)數(shù)。

$(".box>ul>li").eq(i).css("backgroundImage","url(image/"+(i+1)+".jpg)");

（2）mouseenter（）：鼠標(biāo)指針滑進(jìn)元素時(shí)，會(huì)觸發(fā)事件即執(zhí)行當(dāng)發(fā)生 mouseenter 事件時(shí)被運(yùn)行的函數(shù)

（3）mouseleave（）：當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)，會(huì)觸發(fā)事件，規(guī)定當(dāng)發(fā)生 mouseleave 事件時(shí)被運(yùn)行的函數(shù)，該事件大多數(shù)時(shí)候會(huì)與 mouseenter 事件一起使用。

（4）stop(stopAll,goToEnd)：停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)。

stopAll ：是否停止被選元素的所有加入隊(duì)列的動(dòng)畫(huà)，

goToEnd ：是否允許完成當(dāng)前的動(dòng)畫(huà)。

這兩個(gè)參數(shù)都是可選的但是goToEnd 參數(shù)只能在設(shè)置了 stopAll 參數(shù)時(shí)才可以使用，不能單獨(dú)使用

（5）siblings（selector）： 獲得匹配集合中每個(gè)元素的并通過(guò)選擇器進(jìn)行篩選是可選的。

selector 指字符串值，指用于匹配元素的選擇器表達(dá)式。

（6）animate() 方法：執(zhí)行 CSS 屬性集的自定義動(dòng)畫(huà)。該方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)，注意只有數(shù)字值可創(chuàng)建動(dòng)畫(huà)，字符串值無(wú)法創(chuàng)建動(dòng)畫(huà)。

注意：在寫(xiě)動(dòng)畫(huà)時(shí)注意要加stop（）停止原先的動(dòng)畫(huà)目的是為了防止動(dòng)畫(huà)重疊影響效果。

完整代碼展示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
width:1300px;
}
.box{
width:1200px;
height: 200px;
border: 1px solid #ccc;
margin: 100px auto;
}
.box li{
width:240px;
height: 200px;
float:left;//讓所有的li元素左對(duì)齊
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){
for(var i=0;i<$(".box>ul>li").length;i++){
$(".box>ul>li").eq(i).css("backgroundImage","url(image/"+(i+1)+".jpg)");
  }
 $(".box>ul>li").mouseenter(function(){
//  鼠標(biāo)滑過(guò)時(shí)li的寬度為800，離開(kāi)時(shí)為240
$(this).stop().animate({width:800}).siblings().stop().animate({width:100}).mouseleave
(function(){
   $(".box>ul>li").stop().animate({width:240})
 })
 })
 })
</script>
</body>
</html>

效果圖

jQuery實(shí)現(xiàn)手風(fēng)琴效果的方法

動(dòng)畫(huà)演示

jQuery實(shí)現(xiàn)手風(fēng)琴效果的方法

感謝各位的閱讀！關(guān)于jQuery實(shí)現(xiàn)手風(fēng)琴效果的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享文章：jQuery實(shí)現(xiàn)手風(fēng)琴效果的方法
本文網(wǎng)址：http://bm7419.com/article14/jcisde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站改版、服務(wù)器托管、品牌網(wǎng)站制作、網(wǎng)站排名、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司