zoukankan      html  css  js  c++  java
  • 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;
                 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;
        0;
        height:0;
        margin:0;
        padding:0;
        border:none;
    }  */
    
            .c:after {
                clear: both;
                 0;
                padding: 0;
                content: "";
                display: block;
                visibility: hidden;
            }
    
            body {
                font-size: 14px;
                color: black;
                background: #09c;
            }
    
    
    
            .active {}
    
            .wrap {
                 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;
                 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>

  • 相关阅读:
    遗传算法(Genetic Algorithm, GA)及MATLAB实现
    CCF CSP 201809-2 买菜
    PAT (Basic Level) Practice (中文)1008 数组元素循环右移问题 (20 分)
    PAT (Basic Level) Practice (中文)1006 换个格式输出整数 (15 分)
    PAT (Basic Level) Practice (中文)1004 成绩排名 (20 分)
    PAT (Basic Level) Practice (中文)1002 写出这个数 (20 分)
    PAT (Advanced Level) Practice 1001 A+B Format (20 分)
    BP神经网络(原理及MATLAB实现)
    问题 1676: 算法2-8~2-11:链表的基本操作
    问题 1744: 畅通工程 (并查集)
  • 原文地址:https://www.cnblogs.com/xingkongly/p/7672568.html
Copyright © 2011-2022 走看看