怎么能实现摇一摇结束后返回结果,比如弹出一个框,又比如微信:
官方源码:
<!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);">
<header id="header">
<div class="nvbt iback" onclick="back()"></div>
<div class="nvtt">摇一摇</div>
</header>
<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>
<script type="text/javascript" src="../js/immersed.js" ></script>
</html>
0 个回复