本篇文章為大家展示了使用jQuery怎么實現一個手風琴效果，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
1.運用jQuery，動畫樣式進行輪播圖切換
2.前提，需要引入animate.css（官網下載就有）
HTML代碼：
<head> <meta charset="UTF-8"> <title>手風琴</title> <link rel="stylesheet" href="../animate.css"> <link rel="stylesheet" href="css/index.css"> <script src="../jquery-3.1.0.js"></script> <!-- <script src="js/手風琴index.js"></script>--> </head> <body> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg bg-active"></div> <div class="main"> <ul> <li><div><p>穿越火線</p></div></li> <li><div><p>王者榮耀</p></div></li> <li><div><p>使命召喚</p></div></li> <li class="li-active"><div><p>英雄聯盟</p></div></li> </ul> </div> </body>
script代碼：
<script>
$(function () {
$("li").mouseenter(function () {
//stop()阻止動畫效果
$(this).stop().animate({width:"700px"},1000,"linear").fadeIn();
$(this).siblings("li").stop().animate({width:"100px"},1000,"linear").fadeIn();
$(".bg").eq($(this).index()).siblings(".bg").stop().fadeOut();
$(".bg").eq($(this).index()).stop().animate({top:"700px"},400,"linear").fadeIn();
});
});
</script>css代碼：
*{
margin: 0;
padding: 0;
}
html,body, .bg{
height: 700px;
width: 1400px;
overflow: hidden;
}
body{
position: relative;
}
.bg{
display: none;
}
.bg:nth-child(1){
background:url("../images/1.jpg")no-repeat center/cover;
}
.bg:nth-child(2){
background:url("../images/2.jpg")no-repeat center/cover;
}
.bg:nth-child(3){
background:url("../images/3.jpg")no-repeat center/cover;
}
.bg:nth-child(4){
background:url("../images/4.jpg")no-repeat center/cover;
}
/*大背景顯示*/
.bg-active{
display: block;
}
.main{
position: absolute;
width: 1000px;
height: 400px;
/*background-color: pink;*/
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.main ul{
list-style: none;
}
.main ul li{
float: left;
width: 100px;
height: 400px;
transition:right 1s;
}
/*小背景顯示*/
.main ul li.li-active{
width: 700px;
height: 400px;
}
.main ul li:nth-child(1){
background: url("../images/1.jpg")no-repeat center/cover;
}
.main ul li:nth-child(2){
background: url("../images/2.jpg")no-repeat center/cover;
}
.main ul li:nth-child(3){
background: url("../images/3.jpg")no-repeat center/cover;
}
.main ul li:nth-child(4){
background: url("../images/4.jpg")no-repeat center/cover;
}
.main ul li div{
height: 400px;
width: 100px;
background-color: rgba(0,0,0,.5);
}
.main ul li div p{
color: #fff;
padding: 40px;
font-size: 20px;
opacity: 0.5;
}上述內容就是使用jQuery怎么實現一個手風琴效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
