zoukankan      html  css  js  c++  java
  • 利用css3实现3D轮播图

    动画实现主要利用了z-index将层级关系改变,从而实现了焦点图的效果;css3属性 transform rotate 来实现图片的动画效果 。transition实现过度动画!

            * {
                margin: 0;
                padding: 0;
            }
            
            .stage {
                width: 500px;
                height: 280px;
                margin: 100px auto;
                perspective: 1800px;
                position: relative;
            }
            
            img {
                vertical-align: middle;
            }
            
            .stage ul {
                width: 500px;
                height: 280px;
                list-style: none;
            }
            
            .stage ul li {
                width: 500px;
                height: 280px;
                position: absolute;
                top: 0;
                left: 0;
                transition: all 2s ease 0s;
            }
            
            .stage ul .left2 {
                transform: rotateY(30deg) translateX(-380px) translateZ(-20px);
                z-index: 7;
            }
            
            .stage ul .left1 {
                transform: rotateY(40deg) translateX(-280px) translateZ(70px);
                z-index: 8;
            }
            
            .stage ul .king {
                z-index: 9;
            }
            
            .stage ul .right1 {
                transform: rotateY(-40deg) translateX(280px) translateZ(-70px);
                z-index: 8;
            }
            
            .stage ul .right2 {
                transform: rotateY(-30deg) translateX(380px) translateZ(-70px);
                z-index: 7;
            }
            
            .stage ul .bench-warmer {
                z-index: 5;
            }
            
            .stage span {
                display: block;
                width: 60px;
                height: 60px;
                background-color: rgba(0, 0, 255, .5);
                z-index: 20;
                position: absolute;
                color: #fff;
                font-size: 50px;
                line-height: 60px;
                text-align: center;
                margin-top: -30px;
            }
            
            #pre {
                top: 140px;
                left: -380px;
            }
            
            #next {
                top: 140px;
                right: -380px;
            }
    window.onload = function() {
                var pre = document.getElementById('pre');
                var next = document.getElementById('next');
                var zhuang = document.getElementById('zhuang');
                var lis = zhuang.getElementsByTagName('li');
                var lock = false;
                var classes = ['left2', 'left1', 'king', 'right1', 'right2', 'bench-warmer', 'bench-warmer', 'bench-warmer', 'bench-warmer'];
                pre.onclick = function() {
                    // 在动画播放的时候将锁锁住,判断动画是否在播放,如果在播放,锁住,终止函数的执行用return,没播放就解锁,所以默认是解锁的;
                    // 一单击的时候就锁住动画, 所以单击的时候让lock = true;
                    if (lock == true) {
                        return;
                    }
                    // 锁定
                    lock = true;
    
                    setTimeout(function() {
                            lock = false;
                        }, 2000)
                        // 将classes的第一个取出来, 放在最后一个位置
                    var firstclass = classes.shift();
                    classes.push(firstclass);
                    console.log(classes);
                    // 然后将classes给相应的class
                    for (var i = 0; i < classes.length; i++) {
                        lis[i].className = classes[i];
                    }
                }
                next.onclick = function() {
                    // 在动画播放的时候将锁锁住,判断动画是否在播放,如果在播放,锁住,终止函数的执行用return,没播放就解锁,所以默认是解锁的;
                    // 一单击的时候就锁住动画, 所以单击的时候让lock = true;
                    if (lock == true) {
                        return;
                    }
                    // 锁定
                    lock = true;
    
                    setTimeout(function() {
                            lock = false;
                        }, 2000)
                        // var lastclass = classes.pop();
                    classes.unshift(classes.pop());
                    console.log(classes);
                    for (var i = 0; i < classes.length; i++) {
                        lis[i].className = classes[i];
                    }
                }
            }
     <div class="stage">
            <ul id="zhuang">
                <li class="left2"><img src="images/50/1.jpg" alt=""></li>
                <li class="left1"><img src="images/50/2.jpg" alt=""></li>
                <li class="king"><img src="images/50/3.jpg" alt=""></li>
                <li class="right1"><img src="images/50/4.jpg" alt=""></li>
                <li class="right2"><img src="images/50/5.jpg" alt=""></li>
                <li class="bench-warmer"><img src="images/50/6.jpg" alt=""></li>
                <li class="bench-warmer"><img src="images/50/7.jpg" alt=""></li>
                <li class="bench-warmer"><img src="images/50/8.jpg" alt=""></li>
                <li class="bench-warmer"><img src="images/50/9.jpg" alt=""></li>
            </ul>
            <span id="pre">&lt;</span>
            <span id="next">&gt;</span>
        </div>
  • 相关阅读:
    场曲——像差相关
    曲面探测器相关——查资料
    光学系统联合设计
    Python3:Django连接Mysql数据库时出错,'Did you install mysqlclient or MySQL-python?'
    Python3.x:pip install pymssql安装时出错
    Python3:自动发送账单邮件
    Python3:input()输入函数的用法
    Python3:读取配置dbconfig.ini(含有中文)显示乱码的解决方法
    python3:利用smtplib库和smtp.qq.com邮件服务器发送邮件
    CSS3:布局display属性的flex(弹性布局)
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/6682648.html
Copyright © 2011-2022 走看看