溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了jquery怎樣實現百葉窗效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
最開始看效果的時候覺得好復雜，以為是寬度的變化寫的動畫，但是后來細想，如果是寬度變化，那么圖片變窄的時候肯定會失真了，后來經過學習，發現原來原理很簡單：
基本原理就是，將圖片都絕對定位到盒子里，然后分別定位，平分整個盒子，圖片就會顯示一種層疊效果了（本案例是通過left值控制位置）；然后通過jq控制，當鼠標經過某張圖片的時候這張圖片完全顯示（即left值進行變化），其他圖片的left值也進行相應的改變。
文字描述起來很難懂的樣子，先上html和css布局效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto;}img{ border: none; display: block; position: absolute; top: 0;}img:nth-of-type(1){ left: 0;}img:nth-of-type(2){ left: 84px;}img:nth-of-type(3){ left: 168px;}img:nth-of-type(4){ left: 252px;}img:nth-of-type(5){ left: 336px;}</style><div class="box"> <img src="https://cache.yisu.com/upload/information/20220117/488/60384.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60385.jpg"> <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60393.jpg"> <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg"></div></body></html>布局很簡單，接下來就是jq控制各個圖片相對位置的變化了。
起始位置：五張圖片的 left 值在css已經寫好，就是平分了整個盒子的寬度；
鼠標經過時候：經過的那張圖片完全顯示，即占據寬度280px（圖片的寬度是280px），剩余的寬度是 （盒子寬度-280px）/剩余的圖片數量，根據所得值確定各個圖片的終止位置，left值；
感覺自己說的好復雜，先看下鼠標講過某張圖的時候的動畫效果：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto;}img{ border: none; display: block; position: absolute; top: 0;}img:nth-of-type(1){ left: 0;}img:nth-of-type(2){ left: 84px;}img:nth-of-type(3){ left: 168px;}img:nth-of-type(4){ left: 252px;}img:nth-of-type(5){ left: 336px;}</style><div class="box"> <img src="https://cache.yisu.com/upload/information/20220117/488/60384.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60385.jpg"> <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60393.jpg"> <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg"></div><script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script><script type="text/javascript">var lefts;var idx;$("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); lefts = idx * 35; //當前圖片的變化 $(this).stop(true).animate({"left" : idx * 35}, 1000); });})當前圖片能夠愉快的玩耍了，接下來的重點就是其余圖片怎么運動。
此時，我們可以把剩余的圖片分成左右兩部分，用jq 的 ":lt()" 和 ":gt()"方法寫出剩余部分的效果。這里有一個小小的坑，自己也是繞了半天，最后還是別人提醒的才繞出來。
以當前圖片左側動畫效果為例，最開始我是這么寫的
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto;}img{ border: none; display: block; position: absolute; top: 0;}img:nth-of-type(1){ left: 0;}img:nth-of-type(2){ left: 84px;}img:nth-of-type(3){ left: 168px;}img:nth-of-type(4){ left: 252px;}img:nth-of-type(5){ left: 336px;}</style><div class="box"> <img src="https://cache.yisu.com/upload/information/20220117/488/60384.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60385.jpg"> <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60393.jpg"> <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg"></div><script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script><script type="text/javascript">var lefts;var idx;$("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); lefts = idx * 35; //當前圖片的變化 $(this).stop(true).animate({"left" : idx * 35}, 1000); $(“img:lt( idx )“).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000) }) });})看上去沒有什么錯誤，見證奇跡~~~奇跡~~跡~~~然而并沒有什么奇跡，原因就是 $(“img:lt( idx )“) 這種寫法，里面的idx已經不是變量了，所以無法獲取當前的 idx 值，我們可以在外面定義一個變量，同時用 + 連接 lt 和變量 idx，再把變量引入進去即可。
因此更改后如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto;}img{ border: none; display: block; position: absolute; top: 0;}img:nth-of-type(1){ left: 0;}img:nth-of-type(2){ left: 84px;}img:nth-of-type(3){ left: 168px;}img:nth-of-type(4){ left: 252px;}img:nth-of-type(5){ left: 336px;}</style><div class="box"> <img src="https://cache.yisu.com/upload/information/20220117/488/60384.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60385.jpg"> <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60393.jpg"> <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg"></div><script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script><script type="text/javascript">var lefts;var idx;var imgL; $("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); imgL = "img:lt(" + idx + ")" lefts = idx * 35; //當前圖片的變化 $(this).stop(true).animate({"left" : idx * 35}, 1000); $(imgL).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000) }) });})這樣奇跡就出現了~~ 同樣的道理，右側也是同樣的方法。
最終代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style type="text/css">div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto;}img{ width:280px; height:186px; border: none; display: block; position: absolute; top: 0;}img:nth-of-type(1){ left: 0;}img:nth-of-type(2){ left: 84px;}img:nth-of-type(3){ left: 168px;}img:nth-of-type(4){ left: 252px;}img:nth-of-type(5){ left: 336px;}</style><div class="box"> <img src="https://cache.yisu.com/upload/information/20220117/488/60384.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60385.jpg"> <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg"> <img src="https://cache.yisu.com/upload/information/20220117/488/60393.jpg"> <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg"></div><script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script><script type="text/javascript">//精簡之后的方法var lefts;var idx;var imgL; var imgR;$("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); imgL = "img:lt(" + idx + ")" //獲取當前左側的所有圖片，如果直接用 $("img:lt(idx)")，idx會被當做字符串，獲取不到對應的值 imgR = "img:gt(" + idx + ")" //獲取當前右側的所有圖片 lefts = idx * 35; //當前圖片的變化 $(this).stop(true).animate({"left" : idx * 35}, 1000); //左側圖片的變化 $(imgL).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000) }) //右側圖片的變化 $(imgR).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()+7) * 35}, 1000) }) });})$("img").each(function(){ $(this).mouseleave(function(){ $("img").each(function(){ $(this).stop(true).animate({"left" : ($(this).index())*84}, 1000); }) });})</script></body></html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“jquery怎樣實現百葉窗效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
