本篇给大家带来手风琴效果的菜单,如题,采用简单的jQuery实现.
效果图
手风琴.gif
首先在
<head> </head>里引入一下 jQuery文件.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
html代码
<div class="box">
<ul>
<li class="light tp"><img src="图片地址" /></li>
<!-- 这行设置显示 -->
<li class="tp"><img src="图片地址" /></li>
<li class="tp"><img src="图片地址" /></li>
<li class="tp"><img src="图片地址" /></li>
<li class="tp"><img src="图片地址" /></li>
</ul>
</div>
css代码
* {
margin: 0;
padding: 0;
}
.box {
width: 920px;
height: 405px;
/* 正常设置宽高 */
margin: 100px auto;
overflow: hidden;
/* 溢出隐藏 */
}
.box ul {
width: 1200px;
/* 最好设置宽一点,父级有溢出隐藏不用担心 */
height: 100%;
list-style: none;
/* 消除 li 的黑点 */
background-color: pink;
/* 背景色,黑色很好看,但是我偏要设置成粉色! */
overflow: hidden;
/* 溢出隐藏,当做清除浮动啦 */
}
.tp {
width: 100px;
/* 因为要隐藏,所以100够啦! */
height: 405px;
float: left;
/* 设置浮动 */
overflow: hidden;
/* 溢出隐藏 */
opacity: 0.4;
/* 透明度;表示感觉设置后很好看 */
}
.light {
width: 520px;
/* 设置个吉利的宽,表示要显示的内容宽度 */
height: 405px;
opacity: 1;
/* 透明度:1 相当于没有透明,毕竟是显示属性 */
}
.tp > img {
height: 100%;
cursor: pointer;
/* 鼠标小手 */
}
js代码
$(() => {
// 获取页面中包含图片的li元素
var Li = $(".tp");
$.each(Li, function (index, val) {
$(val).mouseenter(function () {
// 这里一定要注意，先使用stop()停止之前的动画，再开始后面的动画
$(this).stop().animate({ width: "520px", opacity: "1" }, 500);
$(this).siblings(".tp").stop().animate({ width: "100px", opacity: "0.4" }, 500);
});
});
});
.each()遍历数组
.mouseenter()鼠标移入事件
.stop()停止动画
.animate(样式,动画运行速度(秒))动画,样式后面不止一个属性,但是这里采用的是运行速度.
.siblings()选取每个匹配元素的所有同辈元素(不包括自己)
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 920px;
height: 405px;
margin: 100px auto;
overflow: hidden;
}
.box ul {
width: 1200px;
height: 100%;
list-style: none;
background-color: pink;
overflow: hidden;
}
.tp {
width: 100px;
height: 405px;
float: left;
overflow: hidden;
opacity: 0.4;
}
.light {
width: 520px;
height: 405px;
opacity: 1;
}
.tp > img {
height: 100%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="light tp"><img src="图片地址" /></li>
<li class="tp"><img src="图片地址" /></li>
<li class="tp"><img src="图片地址" /></li>
<li class="tp"><img src="图片地址" /></li>
<li class="tp"><img src="图片地址" /></li>
</ul>
</div>
<script>
$(() => {
var li = $(".tp");
$.each(li, function (index, val) {
$(val).mouseenter(function () {
$(this).stop().animate({ width: "520px", opacity: "1" }, 500);
$(this)
.siblings(".tp")
.stop()
.animate({ width: "100px", opacity: "0.4" }, 500);
});
});
});
</script>
</body>
</html>
