zhichen-edu
/
zc_saas_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!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>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
var p=null;
var iLast=2,MAX=20;
var up=null,down=null,offset=50;
var t=null;
// H5 plus事件处理
function plusReady(){
	// 锁定只能竖屏显示
	plus.screen.lockOrientation('portrait-primary');
	// 监听加速度
	plus.accelerometer.watchAcceleration(function(a){
		if(!up){
			return;
		}
		if(!p && ( Math.abs(a.xAxis)+Math.abs(a.yAxis)+Math.abs(a.zAxis) > MAX )){
			// Play audio
			p = plus.audio.createPlayer('_www/audio/shake.wav');
			p.play();
			setTimeout(function(){
				// Change background image
				var index = Math.round(Math.random()*3+1);
				if ( iLast == index ) {
					index++;
					if ( index > 4 ) {
						index = 1;
					}
				}
				document.body.style.backgroundImage='url(../img/shake/'+index+'.jpg)';
				iLast = index;
				// Stop play audio
				p.stop();
				delete p;
				p = null;
			}, 2000 );
			// Animation
			offset=up.offsetHeight/2;
			up.style.webkitTransform = 'translateY(-'+offset+'px)';
			up.style.msTransform = 'translateY(-'+offset+'px)';
			down.style.webkitTransform = 'translateY('+offset+'px)';
			down.style.msTransform = 'translateY('+offset+'px)';
			if(t){
				clearTimeout(t);
			}
			t = setTimeout(function(){
				t = null;
				up.style.webkitTransform = '';
				up.style.msTransform = '';
				down.style.webkitTransform = '';
				down.style.msTransform = '';
			}, 700 );
		}
	}, function(e){
		//outSet('Watch failed: '+e.message);
	}, {frequency:100});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 监听DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', function(){
	up=document.getElementById('up');
	down=document.getElementById('down');
	offset=up.offsetHeight/2;
},false);
// 解锁并关闭
var _back=window.back;
function unlockback(){
	plus.screen.unlockOrientation();
	_back();
}
window.back=unlockback;
		</script>		
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
	</head>
	<body style="background: center center no-repeat url(../img/shake/1.jpg);">
		<div style="height:100%;text-align:center;overflow:hidden;">
			<div id="up" style="width:100%;height:50%;background:#333;-webkit-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;">
				<img style="height:100%;" src="../img/shakeup.png"/>
			</div>
			<div id="down" style="padding-bottom:20px;width:100%;height:50%;background:#333;-webkit-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;">
				<img style="height:100%;" src="../img/shakedown.png"/>
			</div>
		</div>
	</body>
</html>