3D拖拽相册的实现

最新推荐文章于 2021-03-06 05:11:02 发布

weixin_34005042

最新推荐文章于 2021-03-06 05:11:02 发布

阅读量193

点赞数

文章标签： javascript 开发工具 python ViewUI

原文链接：https://my.oschina.net/shadowolf/blog/842495

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>  
<html onselectstart="return false">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
        <title>3D拖拽相册</title>  
        <meta name="Keywords" content="关键字,关键字">  
        <meta name="description" content="">  
        <style type="text/css">  
            *{margin:0px;padding:0px;}  
            body{background:#000;}  
            .pic{width:120px;height:180px;margin:200px auto 0;position:relative;transform-style:preserve-3d;  
                transform:perspective(800px) rotateX(-10deg) rotateY(0deg);}  
            .pic img{position:absolute;border-radius:5px;box-shadow:0 0 10px #FFF;  
                -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);}  
            .pic p{width:1200px;height:1200px;position:absolute;left:50%;top:100%;margin-top:-600px;margin-left:-600px;  
                transform:rotateX(90deg);border-radius:600px;  
                background:-webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,0.3),rgba(0,0,0,0));}  
        </style>  
    </head>  
    <body>  
        <div class="pic">  
            <img src="img/1.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/2.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/3.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/4.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/5.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/6.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/7.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/8.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/9.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/10.jpg" width="100%" height="100%" alt=""/>  
            <img src="img/11.jpg" width="100%" height="100%" alt=""/>  
            <p></p>  
        </div>

        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>  
        <script type="text/javascript">  
            $(function() {  
                var imgL = $(".pic img").size();  
                var deg = 360 / imgL;  
                var roY = 0,roX = -10;  
                var xN = 0, yN = 0;  
                var play = null;  
                $(".pic img").each(function(i) {  
                    $(this).css({"transform":"rotateY(" + i * deg + "deg) translateZ(350px)"});  
                    $(this).attr("ondragstart", "return false");  
                });  
                $(document).mousedown(function(ev) {  
                    clearInterval(play);  
                    var x_ = ev.clientX;  
                    var y_ = ev.clientY;  
                    $(this).bind("mousemove", function(ev) {  
                        var x = ev.clientX;  
                        var y = ev.clientY;  
                        xN = x - x_;  
                        yN = y - y_;  
                        roY += xN * 0.2;  
                        roX -= yN * 0.1;  
                        $(".pic").css({transform:"perspective(800px) rotateX(" + roX+ "deg) rotateY(" + roY + "deg)"});  
                        x_ = ev.clientX;  
                        y_ = ev.clientY;  
                    });  
                }).mouseup(function() {  
                    $(this).unbind("mousemove");  
                    var play = setInterval(function() {  
                        xN *= 0.95;  
                        yN *= 0.95;  
                        if (Math.abs(xN) < 1 && Math.abs(yN) < 1) {  
                            clearInterval(play);  
                        }  
                        roY += xN * 0.2;  
                        roX -= yN * 0.1;  
                        $(".pic").css({transform:"perspective(800px) rotateX(" + roX+ "deg) rotateY(" + roY + "deg)"});  
                    }, 30);  
                });  
            })  
        </script>  
    </body>  
</html>

转载于:https://my.oschina.net/shadowolf/blog/842495