建议chorme浏览器浏览，有样式兼容性问题。
图片可以根据自己本地路径设置路径，js库引用jquery。
写的不好，多多建议，谢谢大家。
1 <html onselectstart="return false;">
2
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
7 <style type="text/css">
8 body {
9 margin: 0;
10 padding: 0;
11 }
12
13 body {
14 background: #000;
15 }
16
17 #wrap {
18 width: 120px;
19 height: 180px;
20 margin: 200px auto 0;
21 position: relative;
22 transform-style: preserve-3d;
23 transform: perspective(800px) rotateX(-10deg);
24 }
25
26 #wrap img {
27 width: 100%;
28 height: 100%;
29 border-radius: 10px;
30 position: absolute;
31 top: 0px;
32 left: 0px;
33 box-shadow: 0 0 10px #fff;
34 -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );
35 -moz-box-reflect:below 10px -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );
36 }
37 </style>
38 </head>
39
40 <body>
41 <div id="wrap">
42 <img src="img/1.jpg" alt="">
43 <img src="img/2.jpg" alt="">
44 <img src="img/3.jpg" alt="">
45 <img src="img/4.jpg" alt="">
46 <img src="img/5.jpg" alt="">
47 <img src="img/6.jpg" alt="">
48 <img src="img/7.jpg" alt="">
49 <img src="img/8.jpg" alt="">
50 <img src="img/9.jpg" alt="">
51 <img src="img/10.jpg" alt="">
52 <img src="img/11.jpg" alt="">
53 </div>
54 <script type="text/javascript">
55 $(function() {
56 var imgLen = $("#wrap img").size();
57 var rotateDeg = 360 / imgLen;
58 $("#wrap img").each(function(i) {
59 $(this).css(‘transform‘, ‘rotateY(‘ + i * rotateDeg + ‘deg) translateZ(350px)‘).attr(‘ondragstart‘,‘return false‘);
60 });
61
62 var roY = 0,roX = -10,xN,yN;
63 $(document).mousedown(function(ev){
64 var x_ = ev.clientX;
65 var y_ = ev.clientY;
66 $(this).bind(‘mousemove‘,function(ev){
67 var x = ev.clientX;
68 var y = ev.clientY;
69
70 xN = x - x_;
71 yN = y - y_;
72
73 roY += xN*0.2;
74 roX -= yN*0.1;
75 $("#wrap").css(‘transform‘,‘perspective(800px) rotateX(‘+roX+‘deg) rotateY(‘+roY+‘deg)‘);
76 x_ = ev.clientX;
77 y_ = ev.clientY;
78 });
79 });
80 $(document).mouseup(function(){
81 $(this).unbind(‘mousemove‘);
82 var play_ = setInterval(function(){
83 xN = xN*0.95;
84 yN = yN*0.95;
85 if(Math.abs(xN)<0.5 && Math.abs(yN)<0.5){
86 clearInterval(play_);
87 };
88 roY += xN*0.2;
89 roX -= yN*0.1;
90 $("#wrap").css(‘transform‘,‘perspective(800px) rotateX(‘+roX+‘deg) rotateY(‘+roY+‘deg)‘);
91 },30);
92 });
93 });
94 </script>
95 </body>
96
97 </html>
直接需求代码的+qq：596023011
时间： 2024-08-25 06:14:30