JQ实现3D拖拽效果

最新推荐文章于 2024-01-06 11:30:00 发布

weixin_30486037

最新推荐文章于 2024-01-06 11:30:00 发布

阅读量174

点赞数

原文链接：http://www.cnblogs.com/jiechen/p/5544333.html

版权

 1 <!DOCTYPE HTML>
 2 <html onselectstart='return false'>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 5         <meta name="keywords" content="" />
 6         <meta name="description" content="" />
 7         <title>3D拖拽效果</title>
 8         <style type="text/css">
 9             *{ margin:0; padding:0;}
10             body{ background:#000; width:100%; height:100%; overflow:hidden}
11             #wrap{ width:133px; height:200px; margin:200px auto 0;
12                 position:relative;
13                 transform-style:preserve-3d;
14                 transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
15                 }
16             #wrap ul li{
17                 list-style:none;
18                 width:120px;
19                 height:180px;
20                 position:absolute;
21                 top:0;left:0;
22                 border-radius:3px;
23                 box-shadow:0 0 10px #fff;
24                 background-size:100%;
25                 
26                 transform:rotateY(0deg) translateZ(0px);
27                 -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
28             }
29             #wrap p{ width:700px; height:700px; position:absolute; border-radius:100%;
30                 left:50%; top:100%; margin-left:-350px; margin-top:-350px;
31                 background:-webkit-radial-gradient(center,rgba(50,50,50,1),rgba(0,0,0,0));
32                 transform:rotateX(90deg);}
33         </style>
34 
35     </head>
36     <body>
37         <div id="wrap">
38             <ul>
39                 <li style="background-image:url(img/1.jpg);"></li>
40                 <li style="background-image:url(img/2.jpg);"></li>
41                 <li style="background-image:url(img/3.jpg);"></li>
42                 <li style="background-image:url(img/4.jpg);"></li>
43                 <li style="background-image:url(img/5.jpg);"></li>
44                 <li style="background-image:url(img/6.jpg);"></li>
45                 <li style="background-image:url(img/7.jpg);"></li>
46                 <li style="background-image:url(img/8.jpg);"></li>
47                 <li style="background-image:url(img/9.jpg);"></li>
48                 <li style="background-image:url(img/10.jpg);"></li>
49                 <li style="background-image:url(img/11.jpg);"></li>
50             </ul>
51             <p></p>
52         </div>
53         
54         <script src="js/jquery-1.11.3.min.js"></script>
55         <script>
56         $(function(){
57             var oL = $('#wrap ul li').size();
58             var Deg = 360/oL;
59             var xDeg = 0,yDeg = -10,xs,ys,p=null;
60 
61             for (var i=oL-1;i>=0;i--)
62             {
63                 
64                 $('#wrap ul li').eq(i).css({
65                     transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",
66                     'transform':'rotateY('+Deg*i+'deg) translateZ(350px)'
67                 });
68             }
69                 
70             
71             $(document).mousedown(function(e){
72                 clearInterval(p);
73                 var x1 = e.clientX;
74                 var y1 = e.clientY;
75                 $(this).bind('mousemove',function(e){
76                     xs = e.clientX - x1;
77                     ys = e.clientY - y1;
78                     x1 = e.clientX;
79                     y1 = e.clientY;
80                     xDeg += xs*0.3;
81                     yDeg -= ys*0.1;
82                     $('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
83                 });
84             }).mouseup(function(){
85                 $(this).unbind('mousemove');
86                 p = setInterval(function(){
87                     if(Math.abs(xs)<0.5&&Math.abs(ys)<0.5){clearInterval(p)};
88                     xs = xs*0.95;
89                     ys = ys*0.95
90                     xDeg += xs*0.3;
91                     yDeg -= ys*0.1;
92                     $('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
93                 },30);
94             });
95         
96         });
97         </script>
98     </body>
99 </html>