今天試著用jq寫了下圖片百葉窗效果，就是鼠標經過那張圖，那張圖顯示，其他圖片縮小~

十余年專注成都網站制作，企業網站制作，個人網站制作服務，為大家分享網站制作知識、方案，網站設計流程、步驟,成功服務上千家企業。為您提供網站建設,網站制作,網頁設計及定制高端網站建設服務,專注于企業網站制作,高端網頁制作,對假山制作等多個方面，擁有豐富的網站推廣經驗。

最開始看效果的時候覺得好復雜，以為是寬度的變化寫的動畫，但是后來細想，如果是寬度變化，那么圖片變窄的時候肯定會失真了，后來經過學習，發現原來原理很簡單：

基本原理就是，將圖片都絕對定位到盒子里，然后分別定位，平分整個盒子，圖片就會顯示一種層疊效果了（本案例是通過left值控制位置）；然后通過jq控制，當鼠標經過某張圖片的時候這張圖片完全顯示（即left值進行變化），其他圖片的left值也進行相應的改變。

文字描述起來很難懂的樣子，先上html和css布局效果

布局很簡單，接下來就是jq控制各個圖片相對位置的變化了。

起始位置：五張圖片的 left 值在css已經寫好，就是平分了整個盒子的寬度；

鼠標經過時候：經過的那張圖片完全顯示，即占據寬度280px（圖片的寬度是280px），剩余的寬度是  （盒子寬度-280px）/剩余的圖片數量，根據所得值確定各個圖片的終止位置，left值；

感覺自己說的好復雜，先看下鼠標講過某張圖的時候的動畫效果：

鼠標移出效果，就是恢復到最開始的狀態，就不在敘述了。

方法可能不是最簡單的方法，說的也可能不甚詳盡，希望大神多多指教，我也多多學習~~~

ps： 圖片不知道怎么加上來，稍后看下再改吧。歡迎各位加入交流學習前端群 466039913

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持創新互聯！