生活随笔
收集整理的這篇文章主要介紹了
【jQuery案例】手风琴
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🙋? 哈嘍大家好，本次是jQuery案例練習系列第五期
?本期是jQuery案例——手風琴
🏆系列專欄：jQuery筆記
😄筆者還是前端的菜鳥，還請大家多多指教呀~
👍歡迎大佬指正，一起學習，一起加油！
文章目錄
案例展示
哈嘍大家好，本次案例將會實現一個簡單的手風琴效果，當鼠標指針滑過方塊時，當前方塊狀態會發生變化👇
手風琴案例
案例分析
手風琴效果的實現并不復雜，需要用到jQuery中的fadeIn()和fadeOut()方法，以及鼠標指針進入事件mouseenter，下面我們來對本次案例的實現思路進行分析👇
1、編寫手風琴效果的頁面結構。案例包含小方塊、大方塊和滑動的效果，所以我們需要設置小方塊的大小和變成大方塊后的大小等。
2、為不同的方塊設置不同的背景顏色。為了美觀和更好的展示效果，大方塊的背景顏色采用了接近于小方塊的背景顏色。
3、通過jQuery實現交互效果。當鼠標指針移動到小方塊時，觸發鼠標指針移入事件。利用選擇器獲取到頁面中的小方塊時，通過fadeIn()和fadeOut()方法控制方塊的顯示與隱藏。
案例實現
HTML
頁面結構主要使用div、ul、li標簽。
思路：
1、設置一個div，類名為king，用于存放方塊。
2、設置方塊結構，使用ul定義無序列表結構，使用li代表小方塊結構。li的類名為current，表示初始狀態。
3、在li標簽內部定義兩個div元素，類名分別為big和small。big表示大方塊，small表示小方塊。
4、通過顏色類名red1和red2等方式設置大小方塊的顏色。
<body><div class="king"><ul><li class="current"><div class="small red1"></div><div class="big red2"></div></li><li class="current"><div class="small orange1"></div><div class="big orange2"></div></li><li class="current"><div class="small yellow1"></div><div class="big yellow2"></div></li><li class="current"><div class="small green1"></div><div class="big green2"></div></li><li class="current"><div class="small ching1"></div><div class="big ching2"></div></li><li class="current"><div class="small blue1"></div><div class="big blue2"></div></li><li class="current"><div class="small purple1"></div><div class="big purple2"></div></li></ul></div></body>
CSS
思路：
1、清除元素的默認樣式。有些標簽會帶有默認樣式，清除樣式也方便我們后續設置css樣式。
2、設置最外層盒子的樣式。最外層盒子也就是類名為king的元素，設置它的大小，背景顏色，邊距，使其居中顯示，隱藏超出盒子的部分。
3、設置大小方塊的背景色。
4、取消列表ul的默認樣式。
5、設置列表的樣式，設置列表的大小，邊距等。這里使用position：relative設置相對定位。position：relative是基于該元素本身原來的位置來定位，當它進行位置移動時，它還是占用著原來的位置。
6、設置初始狀態。
7、設置大方塊樣式，使用display：none；隱藏方塊，設置大方塊的大小，圓角邊框。
8、設置小方塊的樣式，設置小方塊的大小、邊距、圓角邊框。使用position：absolute；使元素脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位時，會當作脫離文檔流的元素不存在而進行定位。
<style>* {margin: 0;padding: 0;}.king {width: 710px;margin: 100px auto;background: rgb(187, 183, 183);overflow: hidden;padding: 10px;}.king ul {list-style: none;}.king li {position: relative;width: 69px;height: 69px;margin-right: 5px;margin-left: 5px;}.king li.current {width: 110px;float: left;}.king li.small {display: none;}.king li.big {display: block;}.big {width: 224px;height: 69px;display: none;border-radius: 5px;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}.red1 {background-color: red;}.red2 {background-color: rgb(248, 97, 97);}.orange1 {background-color: orange;}.orange2 {background-color: rgb(250, 202, 113);}.yellow1 {background-color: yellow;}.yellow2 {background-color: rgb(248, 248, 103);}.green1 {background-color: green;}.green2 {background-color: rgb(21, 209, 21);}.ching1 {background-color: greenyellow;}.ching2 {background-color: rgb(198, 250, 120);}.blue1 {background-color: blue;}.blue2 {background-color: rgb(154, 154, 242);}.purple1 {background-color: purple;}.purple2 {background-color: rgb(218, 17, 218);}</style>
jQuery
jQuery部分有兩種方法，一起看看吧~
首先，最重要的一步是引入jQuery👇
方法一
思路：
1、獲取類名為king元素下的li，并且綁定鼠標指針移入事件。
2、找到當前元素，調用stop()用來停止當前正在進行的動畫，通過調用animate()方法，讓寬度過渡到224px。
3、找到小方塊，實現淡出效果。
4、獲取小方塊的兄弟元素，類名為big的大方塊，實現淡入效果。
5、清除當前元素的其他兄弟元素，大方塊變小方塊。
6、實現小方塊淡入效果。
7、實現大方塊淡出效果。
<script>$(document).ready(function () {$(".king li").mouseenter(function () {var interim = $(this).stop().animate({width: 224,});var fade_square1= interim.find(".small").stop().fadeOut();fade_square1.siblings(".big").stop().fadeIn();var interim2 = $(this).siblings("li").stop().animate({width: 69,});var fade_square2=interim2.find(".small").stop().fadeIn();fade_square2.siblings(".big").stop().fadeOut();});});</script>
方法二
方法二是使用鏈式編程來達到效果，整體思路和方法一類似，就不多贅述啦~
<script>$(document).ready(function () {$(".king li").mouseenter(function(){$(this).stop().animate({width:224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();$(this).siblings("li").stop().animate({width:69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();});});</script>
總結
以上就是今天的學習內容啦~
如果有興趣的話可以訂閱專欄，持續更新呢~
咱們下期再見~
總結
以上是生活随笔為你收集整理的【jQuery案例】手风琴的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
