首页 > > 网页制作 > css >

js 3D旋转效果

2019-01-16 05:49:15来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>智慧园区</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <link rel="stylesheet" href="http://61.174.54.120:9000/static/home/css/swiper.min.css">
    <!-- <link rel="stylesheet" href="http://61.174.54.120:9000/static/home/css/index.css"> -->
    <style>
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video,
    input {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font-weight: normal;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    menu,
    nav,
    section {
        display: block;
    }
    
    html,
    body {
        width: 100%;
        height: 100%;
    }
    
    body {
        line-height: 1;
    }
    
    blockquote,
    q {
        quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /* custom */
    
    a {
        color: #7e8c8d;
        -webkit-backface-visibility: hidden;
        text-decoration: none;
    }
    
    li {
        list-style: none;
    }
    
    body {
        -webkit-text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    .ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    body {
        background-color: #000;
        font-family: "Microsoft Yahei";
    }
    
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        min-width: 1366px;
        min-height: 768px;
        overflow: hidden;
        /*background: url("../images/bg.png");*/
        background:black;
        background-size: cover;
        transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    
    .container .header {
        position: absolute;
        width: 100%;
        height: 60px;
        top: 0;
        left: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: url("../images/title.png") no-repeat center top/1366px auto;
    }
    
    .container .headWord {
        position: absolute;
        width: 100%;
        height: 60px;
        top: 0;
        left: 0;
        font: 24px "微软雅黑";
        font-weight: bold;
        color: #fff;
        text-align: center;
        text-align: -webkit-center;
        line-height: 60px;
        letter-spacing: 2px;
    }
    
    .container .header h2 {
        padding-left: 60px;
        font-size: 54px;
        color: #ffffff;
    }
    
    .container .header .right {
        position: absolute;
        top: 17px;
        right: 13px;
        height: 24px;
        line-height: 24px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    .container .header .right a {
        font-size: 16px;
        color: #ffffff;
        margin-right: 10px;
        padding-left: 20px;
        background: url("../images/icon_exit.png") no-repeat left center/auto 16px;
    }
    
    .container .header .right .qr {
        position: relative;
        font-size: 16px;
        color: #ffffff;
        margin-right: 35px;
        cursor: pointer;
    }
    
    .container .header .right .qr:hover div {
        display: block;
    }
    
    .container .header .right .qr span {
        padding-left: 20px;
        background: url("../images/icon_app.png") no-repeat left center/auto 16px;
    }
    
    .container .header .right .qr div {
        position: absolute;
        display: none;
        top: 30px;
        left: 0;
        width: 100px;
        height: 100px;
        padding: 5px;
        background-color: #fff;
        -webkit-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
    }
    
    .container .header .right .qr div img {
        width: 100%;
        height: 100%;
    }
    
    .container .top {
        position: relative;
        z-index: 20;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 350px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        top: -60px;
    }
    
    .container .top .left {
        width: 370px;
        position: relative;
        margin-right: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    
    .container .top .left .scene {
        position: relative;
        width: 200px;
        height: 160px;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
    
    .container .top .left .carousel {
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-transform: translateZ(-288px);
        transform: translateZ(-288px);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
    }
    
    .container .top .left .carousel__cell {
        position: absolute;
        width: 154px;
        height: 136px;
        left: 23px;
        top: 12px;
        -webkit-transition: opacity 1s, -webkit-transform 1s;
        transition: opacity 1s, -webkit-transform 1s;
        transition: transform 1s, opacity 1s;
        transition: transform 1s, opacity 1s, -webkit-transform 1s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .container .top .left .carousel__cell img {
        width: 100%;
        height: 100%;
    }
    
    .container .top .left .arrow-pre,
    .container .top .left .arrow-next {
        width: 43px;
        height: 43px;
        outline: none;
        border: none;
        /*background: url("../images/up.png");*/
        background: red;
        background-size: 100% 100%;
        cursor: pointer;
    }
    
    .container .top .left .arrow-next {
        /*background: url("../images/down.png");*/
        background: red;

    }
    
    .container .top .right {
        width: 520px;
        margin-left: 70px;
        height: 100%;
        overflow: hidden;
    }
    
    .container .top .right .swiper-container {
        height: 100%;
    }
    
    .container .top .right .swiper-container .swiper-slide {
        position: relative;
    }
    
    .container .top .right .swiper-container .swiper-slide h4 {
        font-size: 36px;
        color: #ffffff;
        margin-bottom: 20px;
    }
    
    .container .top .right .swiper-container .swiper-slide span {
        display: inline-block;
        height: 40px;
        line-height: 36px;
        text-align: center;
        padding: 0 20px;
        font-size: 20px;
        color: #ffffff;
        margin-right: 10px;
        border: 2px solid rgba(0, 252, 255, 0.5);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: rgba(43, 111, 235, 0.3);
        border-radius: 20px;
    }
    
    .container .top .right .swiper-container .swiper-slide p {
        margin-top: 60px;
        font-size: 16px;
        color: #ffffff;
        line-height: 36px;
    }
    
    .container .top .right .swiper-container .swiper-slide a {
        display: block;
        margin-top: 20px;
        width: 120px;
        height: 42px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 38px;
        text-align: center;
        border-radius: 20px;
        border: solid 2px #ffffff;
        font-size: 20px;
        color: #ffffff;
        background-color: transparent;
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
    }
    
    .container .top .right .swiper-container .swiper-slide a:hover {
        background-color: rgba(255, 255, 255, 0.8);
        color: #666;
    }
    
    .container .top .right .swiper-container .swiper-slide .server {
        position: absolute;
        width: 120px;
        height: 120px;
        bottom: 0;
        right: 0;
    }
    
    .container .bottom {
        position: absolute;
        width: 1084px;
        height: 163px;
        bottom: 65px;
        left: 50%;
        margin-left: -542px;
        z-index: 20;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background-image: url("../images/bottom-box.png");
        background-size: 100%;
        -webkit-transition: all 1s;
        transition: all 1s;
    }
    
    .container .bottom::before {
        position: absolute;
        content: '';
        width: 75px;
        height: 177px;
        background: url("../images/bottom-left.png") no-repeat left center/auto 177px;
        top: 0;
        left: -75px;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;
    }
    
    .container .bottom::after {
        position: absolute;
        content: '';
        width: 75px;
        height: 177px;
        background: url("../images/bottom-left.png") no-repeat right center/auto 177px;
        top: 0;
        right: 357px;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;
    }
    
    .container .bottom.goright::before {
        left: 651px;
    }
    
    .container .bottom.goright::after {
        right: -75px;
    }
    
    .container .bottom .left {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 649px;
        height: 169px;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px 23px 10px 19px;
    }
    
    .container .bottom .left li:nth-child(1) i {
        background-image: url("../images/icon_1_1.png");
    }
    
    .container .bottom .left li:nth-child(2) i {
        background-image: url("../images/icon_1_2.png");
    }
    
    .container .bottom .left li:nth-child(3) i {
        background-image: url("../images/icon_1_3.png");
    }
    
    .container .bottom .left li:nth-child(4) i {
        background-image: url("../images/icon_1_4.png");
    }
    
    .container .bottom .left li:nth-child(5) i {
        background-image: url("../images/icon_1_5.png");
    }
    
    .container .bottom .right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 354px;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px 23px 10px 19px;
    }
    
    .container .bottom .right li:nth-child(1) i {
        margin-left: -2px;
        background-image: url("../images/icon_1_5.png");
    }
    
    .container .bottom .right li:nth-child(2) i {
        background-image: url("../images/icon_1_6.png");
    }
    
    .container .bottom h4 {
        font-size: 17px;
        line-height: 20px;
        padding-bottom: 4px;
        color: #02f6ff;
        font-family: "Microsoft Yahei";
        border-bottom: 2px solid #02f6ff;
    }
    
    .container .bottom ul {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    
    .container .bottom ul::before {
        position: absolute;
        left: 0;
        top: 0;
        height: 92%;
        width: 100%;
        content: '';
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-image: -webkit-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
        background-image: -moz-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
        background-image: -ms-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
        background-image: -o-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
    }
    
    .container .bottom ul li {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
        opacity: 0.6;
    }
    
    .container .bottom ul li p {
        font-size: 14px;
        color: #fff;
    }
    
    .container .bottom ul li i {
        display: block;
        width: 31px;
        height: 31px;
        background-size: 31px auto;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 15px;
    }
    
    .container .bottom ul li::before {
        position: absolute;
        display: none;
        left: 0;
        top: 0;
        height: 80%;
        width: 100%;
        content: '';
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-image: -webkit-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
        background-image: -moz-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
        background-image: -ms-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
        background-image: -o-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
        border-top: 4px solid #00f6ff;
    }
    
    .container .bottom ul li.active,
    .container .bottom ul li:hover {
        opacity: 1;
    }
    
    .container .bottom ul li.active::before,
    .container .bottom ul li:hover::before {
        display: block;
    }
    
    .container .bottom ul li.active {
        background: url("../images/bottom-select.png") no-repeat center 10px/116px auto;
    }
    
    .container .left-nav {
        position: absolute;
        z-index: 22;
        right: 0;
        top: 100px;
    }
    
    .container .left-nav li {
        position: relative;
        margin-bottom: 2px;
    }
    
    .container .left-nav li p {
        width: 51px;
        height: 60px;
        background: url("../images/bd.png");
        background-size: 100%;
        line-height: 60px;
        font-weight: bold;
        font-size: 18px;
        font-style: italic;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        -webkit-transition: all 0.1s;
        transition: all 0.1s;
    }
    
    .container .left-nav li a {
        position: absolute;
        top: 0;
        left: 60px;
        display: block;
        font-size: 14px;
        color: #ffffff;
        width: 270px;
        height: 60px;
        background: url("../images/bd2.png") no-repeat left center/auto 60px;
        text-align: center;
        line-height: 60px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    
    .container .left-nav li:hover p {
        opacity: 0;
    }
    
    .container .left-nav li:hover a {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="right" style="z-index: 99999;">
                <!-- <div> -->
                <a href="/index" color="#fff" target="_blank">
                    <span>控制台</span>
                </a>
                <!-- </div> -->
                <a href="/logout">退出</a>
            </div>
        </div>
        <div class="headWord">
            <p>智慧园区统一工作站</p>
        </div>
        <div class="top">
            <div class="left">
                <button class="arrow-pre previous-button"></button>
                <div class="scene">
                    <div class="carousel">
                        <div class="carousel__cell" data-index="0"><img src="http://61.174.54.120:9000/static/home/images/img1.png" alt=""></div>
                        <div class="carousel__cell" data-index="1"><img src="http://61.174.54.120:9000/static/home/images/img2.png" alt=""></div>
                        <div class="carousel__cell" data-index="2"><img src="http://61.174.54.120:9000/static/home/images/img3.png" alt=""></div>
                        <div class="carousel__cell" data-index="3"><img src="http://61.174.54.120:9000/static/home/images/img4.png" alt=""></div>
                        <div class="carousel__cell" data-index="4"><img src="http://61.174.54.120:9000/static/home/images/img5.png" alt=""></div>
                        <div class="carousel__cell" data-index="5"><img src="http://61.174.54.120:9000/static/home/images/img6.png" alt=""></div>
                    </div>
                </div>
                <button class="arrow-next next-button"></button>
                <!-- <div class="arrow arrow-left"></div>
        <div class="arrow arrow-right"></div> -->
            </div>
            <div class="right">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <h4>智慧管控平台</h4>
                            <div><span class="type-1">管理中枢</span></div>
                            <p>集成园区内的信息化智能管控设备，用一张图对园区进行综合管理，并打通其他应用系统，进行应急情况系统派单处理</p>
                            <a href="http://115.236.99.184:9090/server/check" target="_blank">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>智慧党建</h4>
                            <div><span class="type-1">管理中枢</span></div>
                            <p>通过信息化手段，加强以园区为单位的基层党建建设，促进园区内中小企业党组织建设从而对企业健康发展起到促进作用</p>
                            <a href="http://61.174.54.120:9000/party/home/index" target="_blank">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>智慧物业</h4>
                            <div><span class="type-1">管理中枢</span><span class="type-2">超时空展示平台</span></div>
                            <p>智慧物业管理系统，结合物联网+园区智慧物业服务，帮助园区构建线上线下结合的物业服务体系</p>
                            <!-- <a href="http://115.236.99.184:8001/zhplat/login?ticket=59e711d152de7bec7304a8c2ecaf9f0f" target="_blank">立即进入</a> -->
                            <a href="http://61.174.54.120:9000/property/home/index" target="_blank">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>新媒体</h4>
                            <div><span class="type-1">管理中枢</span><span class="type-2">超时空展示平台</span></div>
                            <p>新媒体运营系统，通过“一端输入，多端展示”的方式，实现大屏、PC、移动设备多端全方位覆盖，打造园区宣传与形象展示金名片</p>
                            <a href="http://61.174.54.120:9000/newmedia/index" target="_blank">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>企业服务</h4>
                            <div><span class="type-3">应用平台</span></div>
                            <p>企业服务平台引入优质的第三方服务提供商，对服务提供商的服务进行整合，并在园区方的监管下给园区内企业提供各类服务对接</p>
                            <a href="">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>数据驾驶舱</h4>
                            <div><span class="type-3">应用平台</span></div>
                            <p>为小微园区管理提供一揽子的服务，对内管理包含运行概况，智慧物业，园区经济，园区党建，综合管控等内容</p>
                            <!-- <a href="http://datav.aliyun.com/share/df3993679dba4d9ea39373933f519433" target="_blank">立即进入</a> -->
                            <a href="http://61.174.54.120:9000/dist/#/dashboard?userId=27" target="_blank">立即进入</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <h4>管理中枢</h4>
                <ul>
                    <li class="active"><i></i>
                        <p>智慧管控平台</p>
                    </li>
                    <li><i></i>
                        <p>智慧党建</p>
                    </li>
                    <li><i></i>
                        <p>智慧物业</p>
                    </li>
                    <li><i></i>
                        <p>新媒体</p>
                    </li>
                </ul>
            </div>
            <div class="right">
                <h4>应用平台</h4>
                <ul>
                    <li><i></i>
                        <p>企业服务</p>
                    </li>
                    <li><i></i>
                        <p>数据驾驶舱</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://61.174.54.120:9000/static/home/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://61.174.54.120:9000/static/home/js/swiper.min.js"></script>
    <script type="text/javascript">
    (function() {
        var _max = 6
        var _timer = null
            // 底部选中
        $('.bottom ul').on('click', 'li', function() {
            var index = $(this).index();
            if ($(this).parent().parent().hasClass('right')) {
                index += 4;
            }
            $('.bottom ul li').removeClass('active');
            $(this).addClass('active');
            if ($(this).parent().parent().hasClass('right')) {
                $('.bottom').addClass('goright')
            } else {
                $('.bottom').removeClass('goright')
            }
            // 改变滚动图片-3D
            // changeActive(index);
            selectedIndex = index
            rotateCarousel();
            //轮播切换
            swiper.slideTo(index, 600, false); //(index,speed,callBack)
        });
        // swiper初始化
        var swiper = new Swiper('.swiper-container', {
            allowTouchMove: false,
            preventClicks: false
        });
        // 切换
        function changeActive(index) {
            swiper.slideTo(index, 600, false);
            //触发底部点击事件
            $('.bottom li').eq(index).click();
            // $('.photo-cube__wrapper input').eq(0).click()
        };
        //3D旋转方法
        var carousel = document.querySelector('.carousel');
        var cells = carousel.querySelectorAll('.carousel__cell');
        var cellCount = 6;
        var selectedIndex = 0;
        var activeIndex = 0;
        var cellWidth = carousel.offsetWidth;
        var cellHeight = carousel.offsetHeight;
        var isHorizontal = false;
        var rotateFn = isHorizontal ? 'rotateY' : 'rotateX';
        var radius, theta;

        function rotateCarousel() {
            var angle = theta * selectedIndex * -1;
            carousel.style.transform = 'translateZ(' + -radius + 'px) ' +
                rotateFn + '(' + angle + 'deg)';
        }
        //左右切换
        var prevButton = document.querySelector('.previous-button');
        prevButton.addEventListener('click', function() {
            selectedIndex--;
            if (activeIndex === 0) {
                activeIndex = cellCount - 1;
            } else {
                activeIndex--
            }
            var index = $('.carousel__cell').eq(activeIndex).data('index')
            changeActive(index)
            rotateCarousel();
        });
        var nextButton = document.querySelector('.next-button');
        nextButton.addEventListener('click', function() {
            selectedIndex++;
            if (activeIndex === (cellCount - 1)) {
                activeIndex = 0
            } else {
                activeIndex++
            }
            var index = $('.carousel__cell').eq(activeIndex).data('index')
            changeActive(index)
            rotateCarousel();
        });

        function changeCarousel() {
            theta = 360 / cellCount;
            var cellSize = isHorizontal ? cellWidth : cellHeight;
            radius = Math.round((cellSize / 2) / Math.tan(Math.PI / cellCount));
            for (var i = 0; i < cells.length; i++) {
                var cell = cells[i];
                if (i < cellCount) {
                    // visible cell
                    cell.style.opacity = 1;
                    var cellAngle = theta * i;
                    cell.style.transform = rotateFn + '(' + cellAngle + 'deg) translateZ(' + radius + 'px)';
                } else {
                    // hidden cell
                    cell.style.opacity = 0;
                    cell.style.transform = 'none';
                }
            }
            rotateCarousel();
        };
        // set initials
        changeCarousel();
    })()
    </script>
</body>

</html>

 


原文链接:https://www.cnblogs.com/Byme/p/10271923.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：解决：父级元素不能被子元素内容撑开的解决办法，父级元素没有高

下一篇：弹性盒模型，flex布局

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签