-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
114 lines (109 loc) · 3.5 KB
/
index.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cubeDemo</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header"><h1>致青春</h1></div>
<a href="https://github.com/ddian/cube3d" class="github">View on github</a>
<div class="container" id="dragBox">
<section class="tabs" id="tab">
<input type="radio" checked name="select-tab">
<input type="radio" name="select-tab">
<input type="radio" name="select-tab">
<input type="radio" name="select-tab">
<input type="radio" name="select-tab">
<input type="radio" name="select-tab">
</section>
<section class="cube">
<div class="cubeBox" id="box">
<div class="face face_front"></div>
<div class="face face_top"></div>
<div class="face face_bottom"></div>
<div class="face face_left"></div>
<div class="face face_right"></div>
<div class="face face_back"></div>
</div>
</section>
</div>
</body>
</html>
<script>
'use strict';
(function(){
var tab = document.getElementById('tab');
var buttons = tab.getElementsByTagName('input');
var cubeBox = document.getElementById('box');
var dragBox = document.getElementById('dragBox');
var disX = 0;
var disY = 0;
buttons[0].addEventListener('click',function(){
cubeBox.style.transform = 'rotateY(-360deg)';
cubeBox.style.webkitTransform = 'rotateY(-360deg)';
cubeBox.style.mozTransform = 'rotateY(-360deg)';
},false);
buttons[1].addEventListener('click',function(){
cubeBox.style.transform = 'rotateY(90deg)';
cubeBox.style.webkitTransform = 'rotateY(90deg)';
cubeBox.style.mozTransform = 'rotateY(90deg)';
},false);
buttons[2].addEventListener('click',function(){
cubeBox.style.transform = 'rotateY(-90deg)';
cubeBox.style.webkitTransform = 'rotateY(-90deg)';
cubeBox.style.mozTransform = 'rotateY(-90deg)';
},false);
buttons[3].addEventListener('click',function(){
cubeBox.style.transform = 'rotateX(90deg)';
cubeBox.style.webkitTransform = 'rotateX(90deg)';
cubeBox.style.mozTransform = 'rotateX(90deg)';
},false);
buttons[4].addEventListener('click',function(){
cubeBox.style.transform = 'rotateX(-90deg)';
cubeBox.style.webkitTransform = 'rotateX(-90deg)';
cubeBox.style.mozTransform = 'rotateX(-90deg)';
},false);
buttons[5].addEventListener('click',function(){
cubeBox.style.transform = 'rotateY(180deg)';
cubeBox.style.webkitTransform = 'rotateY(180deg)';
cubeBox.style.mozTransform = 'rotateY(180deg)';
},false);
function getPos(obj){
var left = 0;
var top = 0;
while(obj){
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
return {x:left,y:top}
}
dragBox.style.position = "absolute";
dragBox.style.left = '50%';
dragBox.style.top = '50%';
dragBox.style.marginLeft = '-125px';
dragBox.style.marginTop = '-125px';
dragBox.addEventListener('mousedown',function(ev){
var event = ev||event;
disX = event.clientX-getPos(dragBox).x;
disY = event.clientY-getPos(dragBox).y;
// alert(disY)
document.addEventListener('mousemove',move,false);
document.addEventListener('mouseup',up,false);
function move(ev){
var event = ev||event;
dragBox.style.left = event.clientX-disX+'px';
dragBox.style.top = event.clientY-disY+'px';
}
function up(){
document.removeEventListener('mousemove',move,false);
document.removeEventListener('mouseup',up,false);
dragBox.releaseCapture && dragBox.releaseCapture();
}
dragBox.setCapture&&dragBox.setCapture();
return false;
},false);
})();
</script>