移动端网页实现摇一摇打开咨询连接的方式
发布时间：2022-01-09 17:11:15 所属栏目：经验 来源：互联网
导读：微信的摇一摇功能很强大，这个利用了手机的运动传感器装置的功能可以做很多有趣的事情，而在一般的web页面中，很少有机会去用到这个功能，但也不代表这个功能不可以用，今天361源码网就教大家如何在移动端网页利用摇一摇实现一些有趣的功能。 在HTML5，dev
|
微信的摇一摇功能很强大，这个利用了手机的运动传感器装置的功能可以做很多有趣的事情，而在一般的web页面中，很少有机会去用到这个功能，但也不代表这个功能不可以用，今天361源码网就教大家如何在移动端网页利用摇一摇实现一些有趣的功能。 在HTML5，devicemotion事件deviceorientation特性的运动传感器的封装时间装置，你可以通过改变运动时间获取设备的状态，加速和其他数据（有另一个角度deviceorientation事件提供设备，定位等信息）。而我们可以在前端通过DeviceMotion对设备运动状态的判断，帮助我们在网页上就实现“摇一摇”的交互效果。 一、首先把监听时间绑定给 deviceMotionHandler；//先判断设备是否支持HTML5摇一摇功能；if (window.DeviceMotionEvent) {//获取移动速度，得到device移动时相对之前某个时间的差值比window.addEventListener('devicemotion', deviceMotionHandler, false);}else{alert('您好，你目前所用的设置好像不支持重力感应哦！');} 二、获取设备加速度信息 accelerationIncludingGravity；function deviceMotionHandler(eventData) {var acceleration = eventData.accelerationIncludingGravity,x, y, z;x = acceleration.x;y = acceleration.y;z = acceleration.z;document.getElementById("status").innerHTML = "x:"+x+"y:"+y+"z:"+z;} “摇一摇”的动作既“一定时间内设备了一定距离”，因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，即可进行设备是否有进行晃动的判断。 三、 而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值；//设置临界值,这个值可根据自己的需求进行设定，默认就3000也差不多了var shakeThreshold = 3000;//设置最后更新时间，用于对比var lastUpdate = 0;//设置位置速率var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0; 我们在这里设置100毫秒进行一次位置判断，若前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作。 （编辑：大连站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐