本篇給大家?guī)?lái)手風(fēng)琴效果的菜單,如題,采用簡(jiǎn)單的jQuery實(shí)現(xiàn).
效果圖
手風(fēng)琴.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>
<!-- 這行設(shè)置顯示 -->
<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;
/* 正常設(shè)置寬高 */
margin: 100px auto;
overflow: hidden;
/* 溢出隱藏 */
}
.box ul {
width: 1200px;
/* 最好設(shè)置寬一點(diǎn),父級(jí)有溢出隱藏不用擔(dān)心 */
height: 100%;
list-style: none;
/* 消除 li 的黑點(diǎn) */
background-color: pink;
/* 背景色,黑色很好看,但是我偏要設(shè)置成粉色! */
overflow: hidden;
/* 溢出隱藏,當(dāng)做清除浮動(dòng)啦 */
}
.tp {
width: 100px;
/* 因?yàn)橐[藏,所以100夠啦! */
height: 405px;
float: left;
/* 設(shè)置浮動(dòng) */
overflow: hidden;
/* 溢出隱藏 */
opacity: 0.4;
/* 透明度;表示感覺(jué)設(shè)置后很好看 */
}
.light {
width: 520px;
/* 設(shè)置個(gè)吉利的寬,表示要顯示的內(nèi)容寬度 */
height: 405px;
opacity: 1;
/* 透明度:1 相當(dāng)于沒(méi)有透明,畢竟是顯示屬性 */
}
.tp > img {
height: 100%;
cursor: pointer;
/* 鼠標(biāo)小手 */
}
js代碼
$(() => {
// 獲取頁(yè)面中包含圖片的li元素
var Li = $(".tp");
$.each(Li, function (index, val) {
$(val).mouseenter(function () {
// 這里一定要注意，先使用stop()停止之前的動(dòng)畫(huà)，再開(kāi)始后面的動(dòng)畫(huà)
$(this).stop().animate({ width: "520px", opacity: "1" }, 500);
$(this).siblings(".tp").stop().animate({ width: "100px", opacity: "0.4" }, 500);
});
});
});
.each()遍歷數(shù)組
.mouseenter()鼠標(biāo)移入事件
.stop()停止動(dòng)畫(huà)
.animate(樣式,動(dòng)畫(huà)運(yùn)行速度(秒))動(dòng)畫(huà),樣式后面不止一個(gè)屬性,但是這里采用的是運(yùn)行速度.
.siblings()選取每個(gè)匹配元素的所有同輩元素(不包括自己)
完整代碼
<!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>
