动画效果tab切换,一个tab内容是图片,不过数量不是固定的,点击下一页本tab内容里面的图片切换

最新推荐文章于 2024-03-04 13:45:03 发布

小皮皮不皮

最新推荐文章于 2024-03-04 13:45:03 发布

阅读量809

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/86131611

js 专栏收录该内容

20 篇文章

订阅专栏

这是一个模板,http://www.1905.com/html5/2018moviereport/?from=singlemessage&isappinstalled=0

朋友想做出这样的一样效果,所以我就自己试着写了一下,只是实现了其中的一部分效果,好了话不多说直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Title</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/app.js"></script>
</head>
<body>
<div class="title">下一页</div>
<ul id="top">
    <li class="select">
        <div>
            <img src="img/page1.png" alt="" class="first">
            <img src="img/page2.png" alt="">
            <img src="img/page3.png" alt="">
        </div>
    </li>
    <li class="">
        <div>
            <img src="img/page4.png" alt="" class="first">
            <img src="img/page5.png" alt="">
            <img src="img/page6.png" alt="">
            <img src="img/page7.png" alt="">
        </div>
    </li>
    <li class="">
        <div>
            <img src="img/page8.png" alt="" class="first">
            <img src="img/page9.png" alt="">
            <img src="img/page10.png" alt="">
            <img src="img/page11.png" alt="">
            <img src="img/page12.png" alt="">
        </div>
    </li>
    <li class="">
        <div>
            <img src="img/page13.png" alt="" class="first">
            <img src="img/page14.png" alt="">
            <img src="img/page15.png" alt="">
            <img src="img/page16.png" alt="">
        </div>
    </li>
</ul>
<ul id="footer">
    <li class="red">第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
</ul>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/demo.js"></script>

</body>
</html>

*{
    margin: 0;
    padding: 0;
}
html{
    width: 100%;
    height: 100%;
}
body{
    /*overflow: hidden;*/
    width: 100%;
    height: 100%;
    font-size: 0.28rem;
}
.title{
      width: 15px;
    text-align: center;
    padding: 20px 6px;
    position: absolute;
    right: 0;
    bottom: 30%;
    border: 1px solid black;
    border-right: none;
    z-index: 999;
    cursor: pointer;
}
ul li {
    list-style: none;
    text-align: center;
    /*float: left;*/
}


#top{
    width: 100%;
    height: 100%;
    position: relative;
}
#top li{
    width: 100%;
    height: 100%;
    position: absolute;
    top: -800px;
    left: 0;
}
#top li.select{
    animation: myTab 1s both;
}
#top li.selected{
    animation: myTabnone 1s both;
}
#top li>div{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
#top li>div img{
    width:80%;
    height: 80%;
    margin: 20px auto;
    position: absolute;
    top: -700px;
    left:40px;
}
#top li>div img.first{
    top: 0;
}
#top li>div img.one{
    animation: myfirst 1s both;
    z-index: 99;
}
/*图片切换*/
@keyframes myfirst {
    0%{
        top: -700px;
    }
    100%{
        top: 0;
    }
}
/*内容切换
出现*/
@keyframes myTab {
    0%{
        top:-800px
    }
    100%{
        top: 0;
    }
}
/*消失*/
@keyframes myTabnone{
    0%{
        top: 0;
    }
    100%{
        top: 1400px;
    }
}
#footer{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
}
#footer li{
    width: 25%;
    padding: 20px 0;
    float: left;
    background: #ff923d;
}
#footer li.red{
    background: #0090CE;
}

$(function () {
    var y0=0;
    var y1=0;
    var num = 0;
    var index = 0;
    function move (index){
        num=0;
        $("#footer li").removeClass("red");
        $("#footer li:eq("+index+")").addClass("red");
        $("#top li").addClass("select selected");
        $("#top li>div img").addClass("first").removeClass("one");
        $("#top li:eq(" + index + ")").addClass("select").removeClass("selected");
        $("#top li:eq(" + index + ")>div img").removeClass("one");
    }
    $("#footer li").on("click", function () {
        index = $(this).index();
        move(index);
    });
  

    $(".title").on("click", function () {
        var len = $("#top li:eq(" + index + ")>div img").length-1;
        if (num < len) {
            num++;
            $("#top li:eq(" + index + ")>div img:eq("+num+")").addClass("one");

        }else{
            if(index>$("#footer li").length-1){
                index=-1;
            }
            index++;
            move(index);
        }
    })
})