🙋 哈喽大家好,本次是jQuery案例练习系列第五期 ⭐本期是jQuery案例——手风琴 🏆系列专栏:jQuery笔记 😄笔者还是前端的菜鸟,还请大家多多指教呀~ 👍欢迎大佬指正,一起学习,一起加油!
https://live.csdn.net/v/embed/244227
哈喽大家好,本次案例将会实现一个简单的手风琴效果,当鼠标指针滑过方块时,当前方块状态会发生变化👇
手风琴案例
手风琴效果的实现并不复杂,需要用到jQuery中的fadeIn()
和fadeOut()
方法,以及鼠标指针进入事件mouseenter
,下面我们来对本次案例的实现思路进行分析👇
1、编写手风琴效果的页面结构。案例包含小方块、大方块和滑动的效果,所以我们需要设置小方块的大小和变成大方块后的大小等。
2、为不同的方块设置不同的背景颜色。为了美观和更好的展示效果,大方块的背景颜色采用了接近于小方块的背景颜色。
3、通过jQuery实现交互效果。当鼠标指针移动到小方块时,触发鼠标指针移入事件。利用选择器获取到页面中的小方块时,通过fadeIn()和fadeOut()方法控制方块的显示与隐藏。
页面结构主要使用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>
思路:
1、清除元素的默认样式。有些标签会带有默认样式,清除样式也方便我们后续设置css样式。
2、设置最外层盒子的样式。最外层盒子也就是类名为king的元素,设置它的大小,背景颜色,边距,使其居中显示,隐藏超出盒子的部分。
3、设置大小方块的背景色。
4、取消列表ul的默认样式。
5、设置列表的样式,设置列表的大小,边距等。这里使用position:relative
设置相对定位。position:relative
是基于该元素本身原来的位置来定位,当它进行位置移动时,它还是占用着原来的位置。
6、设置初始状态。
7、设置大方块样式,使用display:none;
隐藏方块,设置大方块的大小,圆角边框。
8、设置小方块的样式,设置小方块的大小、边距、圆角边框。使用position:absolute;
使元素脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位时,会当作脱离文档流的元素不存在而进行定位。
<style>
/* 清除元素的margin和padding */
* {
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👇
思路: 1、获取类名为king元素下的li,并且绑定鼠标指针移入事件。 2、找到当前元素,调用stop()用来停止当前正在进行的动画,通过调用animate()方法,让宽度过渡到224px。 3、找到小方块,实现淡出效果。 4、获取小方块的兄弟元素,类名为big的大方块,实现淡入效果。 5、清除当前元素的其他兄弟元素,大方块变小方块。 6、实现小方块淡入效果。 7、实现大方块淡出效果。
<script>
$(document).ready(function () {
// 1、获取king元素下的li,绑定鼠标指针移入事件
$(".king li").mouseenter(function () {
// 2、找到当前元素,停止当前正在进行的动画,使宽度过渡到224px
var interim = $(this).stop().animate({
width: 224,
});
// 3、找到小方块,实现淡出效果
var fade_square1= interim.find(".small").stop().fadeOut();
// 4、获取小方块的兄弟元素,实现淡入效果
fade_square1.siblings(".big").stop().fadeIn();
// 5、清除当前元素的其他兄弟元素的状态,大方块变小方块
var interim2 = $(this).siblings("li").stop().animate({
width: 69,
});
// 6、小方块淡入
var fade_square2=interim2.find(".small").stop().fadeIn();
// 7、兄弟节点,大方块淡出
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>
以上就是今天的学习内容啦~ 如果有兴趣的话可以订阅专栏,持续更新呢~ 咱们下期再见~