H5页面实现摇一摇并震动【花花教程】.docx

《H5页面实现摇一摇并震动【花花教程】.docx》由会员分享，可在线阅读，更多相关《H5页面实现摇一摇并震动【花花教程】.docx（2页珍藏版）》请在第壹文秘上搜索。

1、H5页面实现摇一摇并震动【花花教程】varspeed=IO;定义摇一摇加速度的临界值值越小摇动的力度越小varX=y=z=IastX=IastY=IastZ=0;初始化x,y,z上加速度的默认值varisHaveShaked=faIse;用于记录是否在动画执行中functioninit()判断系统是否支持html5摇一摇的相关属性if(window.DeviceMotionEvent)window.addEventListenerCdevicemotion,deviceMotionHandlerzfalse);elsealert(notsupportmobileevent);)function

2、deviceMotionHandler()*获取,y,z方向的即时加速度*/varacceleration=event.accelerationlncludingGravity;x=acceleration.;y=acceleration.y;z=acceleration.z;if(Math.abs(x-IastX)speedMath.abs(y-IastY)speedHMath.abs(z-IastZ)speed)摇一摇实际场景就是加速度的瞬间暴增爆减if(!isHaveShaked)alert(x);自己测试各坐标的值。alert(y)alert(z);手机震动1秒if(navigator.vibrate)navigator.vibrate(1000);震动1000毫秒elseif(navigator.webkitVibrate)navigator.webkitVibrate(1000);)模拟网络请求做想干的事isHaveShaked=true;setTimeout(function()isHaveShaked=false;/.l2000);)*保存历史加速度*/IastX=x;IastY=y;IastZ=z;)$(function()init();)；