JS小功能系列11手风琴

Posted 学会五大阵法就会JS

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS小功能系列11手风琴相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: black;
        }

        li {
            list-style-type: none;
        }

        .triangle {
            display: inline-block;
            width: 0px;
            height: 0px;
            border: 8px solid transparent;
            border-top-color: black;
        }

        .circle {
            display: inline-block;
            padding: 5px;
            background: #000;
            border-radius: 50%;
        }
        /* input,button{
   outline:none;
} */

        .l {
            float: left;
        }

        .r {
            float: right;
        }
        /* .c{
    clear:both;
    width:0;
    height:0;
    margin:0;
    padding:0;
    border:none;
}  */

        .c:after {
            clear: both;
            width: 0;
            padding: 0;
            content: "";
            display: block;
            visibility: hidden;
        }

        body {
            font-size: 14px;
            color: black;
            background: #09c;
        }



        .active {}

        .wrap {
            width: 1030px;
            height: 429px;
            background: #07c;
            margin: 20px auto;
            overflow: hidden;
        }

        .hand {
            position: relative;
        }

        .hand li {
            position: relative;
            float: left;
        }

        .hand span {
            display: inline-block;
            background: orange;
            width: 20px;
            height: 429px;
            padding: 0px 20px;
        }

        .hand img {
            position: absolute;
            left: 60px;
            top: 0;
            opacity: 1;
            border: 1px solid red;
        }



        @keyframes moveLeft {
            0% {
                left: 0px;
            }
            100% {
                left: 789px;
            }
        }

        @keyframes moveRight {
            0% {
                  left: 789px;
            }
            100% {
               left: 0px;
            }
        }


        .toggleLeft {
            /*forwards*/
            animation: moveLeft 1s linear forwards;
        }

        .toggleRight {
            animation: moveRight 1s linear forwards;
        }
    </style>

     <script>
        window.onload = function () {
            var handLi = document.querySelectorAll(\'.hand li\'),
                handImg = document.querySelectorAll(".hand img");
            for (var i = 1, len = handLi.length; i < len; i++) {
                handLi[i].onclick = function () {

                    if (this.getAttribute("class") == "toggleLeft")
                        this.className = "toggleRight";
                    else
                        this.className = "toggleLeft";

                }
            }
        }
    </script> 
    <!-- <script src="../jquery-1.7.2/jquery.js"></script>
    <script>
        $(function () {
            $(".hand ul span").each(function (i) {
                $(this).on("click", function () {
                    if (i > 0) {
                        if ($(this).parent().hasClass("show")) {
                            $(this).parent().animate({ left: "0px" });
                            $(this).parent().removeClass("show");
                        } else {
                            $(this).parent().animate({ left: "789px" })
                            $(this).parent().addClass("show");
                        }

                    }


                });
            });
        });
    </script> -->

</head>

<body>
    <div class="main">
        <div class="wrap">
            <div class="hand">

                <ul>
                    <li>
                        <span>1:宠辱不惊，闲看庭前花开花落，
                        </span>
                        <img src="./手风琴素材/img/1.jpg">
                    </li>
                    <li>
                        <span>2:宠辱不惊，闲看庭前花开花落
                        </span>
                        <img src="./手风琴素材/img/2.jpg">
                    </li>
                    <li>
                        <span>3:宠辱不惊，闲看庭前花开花落，
                        </span>
                        <img src="./手风琴素材/img/3.jpg">
                    </li>
                    <li>
                        <span>4:宠辱不惊，闲看庭前花开花落，
                        </span>
                        <img src="./手风琴素材/img/4.jpg">
                    </li>
                    <li>


                    </li>
                </ul>







                </li>

                </ul>
            </div>
        </div>
    </div>
</body>

</html>

以上是关于JS小功能系列11手风琴的主要内容，如果未能解决你的问题，请参考以下文章

JS+JQ手风琴效果

js-小效果-手风琴

bootstrap实现手风琴功能(树形列表)

纯js代码实现手风琴特效

原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果

js 手风琴菜单折叠要用到列表浮动吗