gabyliu.github.io/gravity.html at master · gabyliu/gabyliu.github.io · GitHub

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
<html>
	<head>
		<meta charset="UTF-8">
		<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>弹弹弹弹7</title>
		<style>
			html,body{margin: 0;padding: 0;}
			body{position: relative;height: 100%;}
			.g_test{
				font-size:15px;
				color:#000;
			}
			.base_line{
				position:absolute; top:0px; width:100%; height:50%; border-bottom:1px dashed red;
			}
			.dot{
				display:block;
				height:20px; width:20px; -webkit-border-radius:10px; background-color:#000;
				position:absolute;
				top:50%; left:50%; margin-left:-10px; margin-top:-10px;
			}
		</style>
	</head>
	<body>
		<div id="g_test" class="g_test">
			<p id="wording"></p>
			<p id="wording1"></p>
			<p id="wording2"></p>
			<div class="base_line" id="baseLine"></div>
			<span id="dot" class="dot"></span>
		</div>
		<script>
			var g_test = document.getElementById("g_test"),
				wording = document.getElementById("wording"),
				wording2 = document.getElementById("wording2"),
				dot = document.getElementById("dot"),
				windowW = window.innerWidth,
				windowH = window.innerHeight,
				test = windowH/2 * windowH/2 - windowW/2 * windowW/2,
				test1 = windowW/2,
				test2 = windowH/2;

			var	baseLine = document.getElementById("baseLine"),
				baseLineHSqr = Math.abs(windowH/2 * windowH/2 - windowW/2 * windowW/2);
				baseLineH = Math.sqrt(baseLineHSqr);
			baseLine.style.height = baseLineH + "px";//base line显示
			init();
			function init(){
				if(window.DeviceOrientationEvent){
					window.addEventListener('deviceorientation',  function(e) {
						var angle = parseInt(e.alpha),
							radius = e.alpha * (Math.PI / 180);

						wording.innerHTML = 'client width is ' + windowW + '<br/>client height is ' + windowH + '<br/>alpha is ' + e.alpha + '<br/>beta is ' + e.beta + '<br/>gamma is ' + e.gamma +'<br />dist x is ' + X(radius) + "<br/>dist y is " + Y(radius);

						wording2.innerHTML = 'webkitTransform:translate(' + X(radius) + 'px, ' + Y(radius) + 'px)';
						dot.style.webkitTransform = 'translate(' + X(radius) + 'px, ' + Y(radius) + 'px)';

					});
				}
			}

			function X(alpha){//x轴上的位移
				var x = windowH/2 * Math.sin(alpha);//xy[0]为x值，xy[1]为y值
				return x;
			}
			function Y(alpha){//y轴上的位移
				/*var y = (windowW / 2) - (windowW / 2) * Math.cos(alpha);
				return -y;*/
				var y = windowW / 2 * Math.cos(alpha) - windowW /2;
				return y;
			}
		</script>
	</body>
</html>