zoukankan      html  css  js  c++  java
  • c3和js写的切割轮播图 喜欢宋仲基的妹子汉子们来,观看效果需要引入jQuery^^

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul {
                 560px;
                height: 380px;
                list-style: none;
                border: 1px solid gray;
                display: flex;
                position: relative;
                list-style: none;
                padding: 0;
                margin: 100px auto;
            }
            li{
                height: 100%;
                position: relative;
                 50%;
                transform-style: preserve-3d;
                transition: all 1s;
            }
            ul>a {
                font-size: 40px;
                color: white;
                 50px;
                height: 50px;
                background-color: gray;
                text-align: center;
                line-height: 50px;
                text-decoration: none;
                font-weight: 900;
                position: absolute;
                transform: translateY(-25px);
            }
            li>div{
                 100%;
                height: 100%;
                position: absolute;
            }
    
            ul .left{
                left: -50px;
                top: 50%;
                transform: translateY(-25px);
    
            }
            ul .right{
                right: -50px;
                top: 50%;
                transform: translateY(-25px);
            }
            .first{
                background: url('imgs/01.jpg') no-repeat;
                transform: rotateX(0deg) translateZ(190px);
            }
            .second{
                background: url('imgs/02.jpg') no-repeat;
                transform: rotateX(-90deg) translateZ(190px);
            }
            .third{
                background: url('imgs/03.jpg') no-repeat;
                transform: rotateX(-180deg) translateZ(190px);
            }
            .four{
                background: url('imgs/04.jpg') no-repeat;
                transform: rotateX(-270deg) translateZ(190px);
            }
    
            /* 设置 第二个区域的li标签内部 div backgroun的偏移值 */
            li:nth-child(2){
                transition: all 1s .1s;
            }
            li:nth-child(2)>div{
                background-position: -280px 0;
            }
        </style>
        <script src="js/jquery-3.0.0.min.js"></script>
        <script>
            var clickCount = 0;
            $(function () {
                $(".left").click(function () {
                    clickCount--;
                    $("li").css({transform:'rotateX('+clickCount*90+'deg)'
                    })
                })
                $(".right").click(function () {
                    clickCount++;
                    $("li").css({transform:'rotateX('+clickCount*90+'deg)'
                    })
                })
            })
        </script>
    </head>
    <body>
    <ul class="container">
        <li>
            <div class="first"></div>
            <div class="second"></div>
            <div class="third"></div>
            <div class="four"></div>
        </li>
        <li>
            <div class="first"></div>
            <div class="second"></div>
            <div class="third"></div>
            <div class="four"></div>
        </li>
        <a href="javascript:void(0)" class="left">&lt;</a>
        <a href="javascript:void(0)" class="right">&gt;</a>
    </ul>
    </body>
    </html>
  • 相关阅读:
    我是服务的执政官-服务发现和注册工具consul简介
    跳闸了啊! 服务容灾:熔断器简介
    论获取缓存值的正确姿势
    容器化redis高可用方案
    ASP.NET SessionState 解惑
    Thymeleaf 模板的使用
    记录js的一个图片预览功能代码
    记录一个简单的可以拖动的弹出层
    oracle安装报错[INS-30131]执行安装程序验证所需的初始设置失败(无法访问临时位置)解决方法!
    nginx学习笔记2
  • 原文地址:https://www.cnblogs.com/ch-ching/p/6435929.html
Copyright © 2011-2022 走看看