jQuery实现手风琴小案例

本文实例为大家分享了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;
}
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！