這篇文章主要講解了JS實(shí)現(xiàn)圖片手風(fēng)琴效果的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

創(chuàng)新互聯(lián)建站是專業(yè)的黎平網(wǎng)站建設(shè)公司，黎平接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行黎平網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

''推拉門''動(dòng)效也可以稱作"手風(fēng)琴"效果，大多數(shù)效果實(shí)現(xiàn)的思路基本是一樣的，下面介紹兩種方法，一種是通過改變圖片的偏移位置實(shí)現(xiàn)移動(dòng)，另一種是通過遍歷背景圖片后改變圖片的寬度實(shí)現(xiàn)變換。

推拉門收縮狀態(tài).png

"推拉門"展開狀態(tài).png

"推拉門"實(shí)現(xiàn)方法一：改變圖片寬度

html+css代碼

jQuery實(shí)現(xiàn) 

"推拉門"實(shí)現(xiàn)方法二：改變圖片的偏移值

html+css代碼

 

 

  
![](images/slidepic8.jpg)
  
![](images/slidepic3.jpg)
  
![](images/slidepic4.jpg)
  
![](images/slidepic5.jpg)
  
![](images/slidepic7.jpg)
 
 

jQuery實(shí)現(xiàn)

注意：方法一在實(shí)現(xiàn)的過程中，注意寬度和圖片命名的設(shè)置。

提示：這里使用的是jQuery代碼實(shí)現(xiàn)，javaScript代碼也是一樣的可以實(shí)現(xiàn)，只是修改下遍歷過程和內(nèi)置函數(shù)方法，另外再重寫動(dòng)畫函數(shù)（前面的筆記有封裝好的animate函數(shù)，可以直接引入使用）。

看完上述內(nèi)容，是不是對(duì)JS實(shí)現(xiàn)圖片手風(fēng)琴效果的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。