zhichen-edu
/
zc_saas_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
							<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>水平仪</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" >
// H5 plus事件处理
function plusReady(){
	// 锁定只能竖屏显示
	plus.screen.lockOrientation( "portrait-primary" );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 解锁并关闭
var _back=window.back;
function unlockback(){
	plus.screen.unlockOrientation();
	_back();
}
window.back=unlockback;

var t, xh, xv;
var R = 100;
function update(h, v) {
	var ch = 0, cv = 0;
	if (h > 90) {
		h = 180 - h;
	} else if (h < -90) {
		h = -180 - h;
	}
	if (v > 90) {
		v = 180 - v;
	} else if (v < -90) {
		v = -180 - v;
	}
	var r = Math.max(Math.abs(h), Math.abs(v)) / 90;
	var range = Math.round(R * r);
	if (h == 0) {
		cv = range * v / 90;
	} else if (v == 0) {
		ch = range * h / 90;
	} else {
		var a = Math.atan2(v, h);
		ch = range * Math.cos(a);
		cv = range * Math.sin(a);
	}
	ch = Math.round(ch);
	cv = Math.round(cv);

	t.style.webkitTransform = "translate(" + ch + "px," + cv + "px)";

	h = h.toFixed(1);
	v = v.toFixed(1);
	xh.innerHTML = "" + (-h);
	xv.innerHTML = "" + (-v);
}
document.addEventListener("plusready", function() {
	t = document.getElementById("bubble");
	R = Math.floor(t.offsetWidth * 130 / 320);
	xh = document.getElementById("h");
	xv = document.getElementById("v");

	plus.orientation.watchOrientation(function(r) {
		update(-r.gamma, -r.beta);
	}, function(e) {
		// error
	}, {
		frequency : 100
	});
}, false);
// Adjective select.
document.onselectstart = function() {
	return false;
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
#front {
	width: 60%;
	height: 80px;
	margin: auto;
	margin-top: 20px;
	text-align: center;
}
.inf {
	width: 50%;
	height: 50%;
	line-height: 40px;
	font-size: 28px;
	text-align: center;
	text-align: center;
	vertical-align: middle;
	float: left;
}
#container {
	width: 80%;
	position: relative;
	margin: auto;
	text-align: center;
	line-height: 100%;
	overflow: hidden;
}
.bg {
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
}
#bubble {
	width: 100%;
	vertical-align: middle;
	-webkit-transition: all 0.1s linear;
}
a.bh {
	width: 100%;
	height: 10%;
	position: fixed;
	bottom: 0px;
	background: rgb(128,128,128);
	text-align: center;
	vertical-align: middle;
}
a.bh:active {
	background: rgb(64,64,64);
}
#hi {
	height: 80%;
	margin: auto;
	margin-top: 5px;
	vertical-align: middle;
}
		</style>
	</head>
	<body>
		<div id="front">
			<div class="inf" style="font-weight:bold;">
				横向
			</div>
			<div class="inf" style="font-weight:bold;">
				纵向
			</div>
			<div id="h" class="inf">
				0
			</div>
			<span id="v" class="inf">0</span>
		</div>
		<div id="container">
			<img class="bg" src="../img/orientationbg.png"/>
			<img class="bg" src="../img/orientationl.png"/>
			<img id="bubble" src="../img/orientationb.png"/>
		</div>
	</body>
</html>