360度旋转相册

最新推荐文章于 2024-09-30 18:55:14 发布

weixin_30699465

最新推荐文章于 2024-09-30 18:55:14 发布

阅读量100

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fangfeiyue/p/7364939.html

版权

按住鼠标可以拖动，有惯性效果。展示图片的话，把li背景换成图片即可，要添加或删除一些的话，自己调整一下translateZ,和景深perspective即可。假如你看不到3D效果，换浏览器吧大兄弟！！没做兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul{padding: 0;margin:0;}
        body{overflow: hidden;background-color: #000;}
        li{list-style: none;}
        .content{perspective: 1000px;}
        .box{position: relative; width: 120px;height: 200px;margin:150px auto;transform-style: preserve-3d;transform:rotateX(-10deg); -webkit-touch-callout: none;-webkit-user-select: none ; -khtml-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ;cursor:default;}
        .box li{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
    </style>
</head>
<body>
    <div class="content">
        <div class="box">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
    window.onload = function(){
        var colors = ["#69D2E7", "#E20049", "#19215E", "#F38630", "#FA6900", "#FF4E50", "#F9D423", "#FFB6FF", "#474168", "#6ACAFC", "#B1AD25", "#13445A"];
        var Ali = [].slice.call(document.querySelectorAll('li'),0);
        var Obox = document.querySelector('.box');
        var rotateY = 0;
        var rotateX = 0;
        var dX,dY;
        var Time =0;
        var deg = 360/Ali.length;
        Ali.forEach(function (dom,index) {
            dom.style.backgroundColor = colors[index];
            dom.style.transform = "rotateY("+(deg*index)+"deg) translateZ(350px)";
            dom.style.zIndex = "-"+index;
            dom.style.transition = "all .8s "+index*0.1+"s";
        })
        document.onmousedown = function(e){
            var e = e || window.event;
            var oldX = e.clientX;
            var oldY = e.clientY;
            clearTimeout(Time);
            this.onmousemove = function(e){
                var e = e || window.event;
                dX = e.pageX-oldX;
                dY = e.pageY-oldY;
                rotateX += dY*0.15;
                rotateY += dX*0.1;
                Obox.style.transform = "rotateX("+rotateX+"deg)"+" rotateY("+rotateY+"deg)";
                oldX = e.clientX;
                oldY = e.clientY;
            }
            this.onmouseup= function(){
                this.onmousemove = null;
                deg = 0;
                Time = setTimeout(function(){
                        if(Math.abs(dX)>0.01 || Math.abs(dY)>0.01){
                            rotateX += dY*0.15;
                            rotateY += dX*0.1;
                            Obox.style.transform = "rotateX("+rotateX+"deg)"+" rotateY("+rotateY+"deg)";                            
                            dX *= 0.9;
                            dY *= 0.9;
                            Time = setTimeout(arguments.callee,1000/30);
                        }
                    },1000/30);
                this.onmouseup = null;
            }
        }
    }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/fangfeiyue/p/7364939.html