1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 padding:0;
9 margin:0;
10 list-style: none;
11 }
12 body{
13 overflow: hidden;
14 background: #000;
15 }
16 #box{
17 width:100px;
18 height:85px;
19 position: absolute;
20 top:50%;
21 left:50%;
22 margin:-200px 0 0 -67px;
23 transform-style: preserve-3d;
24 transform:perspective(1500px) rotateX(-15deg);
25 }
26 ul li{
27 position: absolute;
28 top:0;
29 left:0;
30 width:100%;
31 height:100%;
32 background: url(img/1.jpg) no-repeat;
33 background-size:contain;
34 border-radius: 10px;
35 box-shadow: 0px 0px 10px 4px #fff;
36
37 transform: perspective(1500px) rotateY(0deg) translateZ(0px);
38
39
40 -webkit-box-reflect:below 20px linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.4));
41 }
42 </style>
43 <script>
44 window.onload=function(){
45 var oBox=document.getElementById(‘box‘);
46
47 var N=9;
48 for (var i = 0; i <N; i++) {
49 var oLi=document.createElement(‘li‘);
50 oLi.style.backgroundImage=‘url(img/‘+(i+1)+‘.jpg)‘;
51
52 (function(obj,index){
53 setTimeout(function(){
54 obj.style.transform=‘perspective(1500px) rotateY(‘+index*360/N+‘deg) translateZ(300px)‘;
55 },0)
56 })(oLi,i);
57
58 oLi.style.transition=‘1s all ease ‘+200*(N-i)+‘ms‘;
59 oBox.appendChild(oLi);
60 }
61
62
63 //键盘
64 var aLi=oBox.children;
65 //检测发牌结束
66
67 aLi[0].addEventListener(‘transitionend‘,function(){
68 for (var i = 0; i < aLi.length; i++) {
69 aLi[i].style.transition=‘none‘;
70 d=Math.abs(Math.abs((i*360/N)%360)-180)/180;
71 if(d<0.3){
72 d=0.3;
73 }
74 aLi[i].style.opacity=d;
75 }
76 },false)
77
78
79 var y=0;
80 var x=0;
81
82 var lastX=0;
83 var lastY=0;
84
85 var speedX=0;//绕着X轴旋转的速度
86 var speedY=0;//绕着Y轴旋转的速度
87
88 var timer=null;
89 document.onkeydown=function(ev){
90 switch(ev.keyCode){
91 case 37:
92 y--;
93 break;
94 case 39:
95 y++;
96 break;
97 case 38:
98 x++;
99 break;
100 case 40:
101 x--;
102 break;
103 }
104
105 move(x,y);
106 };
107 document.onmousedown=function(ev){
108 clearInterval(timer);
109 var disX=ev.clientX-y;
110 var disY=ev.clientY-x;
111 document.onmousemove=function(ev){
112 speedX=ev.clientY-lastY;
113 speedY=ev.clientX-lastX;
114
115 lastX=ev.clientX;
116 lastY=ev.clientY;
117 x=ev.clientY-disY;
118 y=ev.clientX-disX;
119 //赋值
120 move(-x/4,y/4);
121 };
122 document.onmouseup=function(){
123 timer=setInterval(function(){
124 speedX*=0.95;
125 speedY*=0.95;
126 x+=speedX;
127 y+=speedY;
128 move(-x/4,y/4);
129
130 if(Math.abs(speedX)<1 && Math.abs(speedY)<1){
131 clearInterval(timer);
132 }
133
134 },30)
135 document.onmouseup=null;
136 document.onmousemove=null;
137 };
138 return false;
139 };
140
141 function move(x,y){
142 for(var i=0;i<aLi.length; i++){
143 aLi[i].style.transition=‘none‘;
144 aLi[i].style.transform=‘perspective(1500px) rotateY(‘+(i*360/N+y)+‘deg) translateZ(300px)‘;
145
146 d=Math.abs(Math.abs((i*360/N+y)%360)-180)/180;
147 //aLi[i].innerHTML=d;
148 if(d<0.3){
149 d=0.3;
150 }
151 aLi[i].style.opacity=d;
152 }
153 oBox.style.transform=‘perspective(1500px) rotateX(‘+(x-15)+‘deg)‘;
154 }
155 };
156 </script>
157 </head>
158 <body>
159 <ul id="box">
160 <!-- <li></li> -->
161 </ul>
162 </body>
163 </html>
时间： 2024-10-14 16:49:57