forked from Crise420WMT/crise420wmt.github.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
h5_3dRing.html
97 lines (94 loc) · 3.31 KB
/
h5_3dRing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;list-style: none;}
html,body{background: #000;}
.oul{width: 133px;height: 200px;position: absolute;
left: 50%;top:50%;margin-left: -67px;margin-top: -200px;
transform-style:preserve-3d; transform:rotateX(-15deg);}
li{width: 133px;height: 200px;background-image: url("image/taobao_img1.jpg");position: absolute;
left: 0;top:0;box-shadow: 0 0 20px #fff;
-webkit-box-reflect:below 20px -webkit-linear-gradient(bottom,rgba(0,0,0,0.1),rgba(0,0,0,0) 20%);}
</style>
<script>
window.onload=function(){
var oUl=document.querySelector('.oul');
var N=11;
for(var i=0;i<N;i++){
var oLi=document.createElement('li');
oLi.style.backgroundImage='url(image/taobao_img'+(i+1)+'.jpg)';
oUl.appendChild(oLi);
}
var aLi=oUl.children;
for(var i=0;i<aLi.length;i++){
aLi[i].style.transition='0.5s ease all '+(N-i)*100+'ms';
//aLi[i].style.transition='0.5s ease all '; ----同时配合下面的使用
;(function(index){
setTimeout(function() {
aLi[index].style.transform = 'perspective(800px) rotateY(' + (360 * index / N) + 'deg) translateZ(340px)';
},0);
// },200*(N-i)); ----也可以这样写，，更容易理解
})(i);
}
aLi[0].addEventListener('transitionend',function(){
//console.log(1);
change(y);
},false);
var x=0;
var y=0;
var timer=null;
document.onmousedown=function(ev){
clearInterval(timer);
var lastX=ev.clientX;
var lastY=ev.clientY;
var speedX=0;
var speedY=0;
document.onmousemove=function(ev){
var disX=ev.clientX-lastX;
var disY=ev.clientY-lastY;
y+=disX;
x-=disY;
change(y/3,x/3);
lastX=ev.clientX;
lastY=ev.clientY;
speedX=disX;
speedY=disY;
//speedY=disY;
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
timer=setInterval(function(){
speedX*=0.9;
speedY*=0.9;
y+=speedX;
x+=speedY;
change(y/3);
if(Math.abs(speedX)<1&&Math.abs(speedY)<1){
clearInterval(timer);
}
},30);
};
return false;
};
function change(y,x){
oUl.style.transform='rotateX('+(-15+x)/10+'deg)';
for(var i=0;i<aLi.length;i++){
aLi[i].style.transition='none';
aLi[i].style.transform='perspective(800px) rotateY('+(360*i/N+y)+'deg) translateZ(340px)';
var scale=Math.abs(Math.abs(360*i/N+y)%360-180)/180;
//console.log(Math.abs(360*i/N+y)-180);
(scale<0.4)&&(scale=0.4);
aLi[i].style.opacity=scale;
}
}
};
</script>
</head>
<body>
<ul class="oul"></ul>
</body>
</html>