移动端网页实现摇一摇打开咨询连接的方法--1号站长-站长学院|资讯交流平台

这篇文章主要为大家详细介绍了移动端网页实现摇一摇打开咨询连接的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

微信的摇一摇功能很强大，这个利用了手机的运动传感器装置的功能可以做很多有趣的事情，而在一般的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间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作。

以上三点就可以实现在web端的摇一摇功能，那么我们就通过这个功能来实现摇一摇打开新的链接，这里打开新链接的代码我们用：

//链接自行替换window.open("http://www.cuoxin.com");

奉上一段模拟微信摇一摇的全部代码：链接: https://pan.baidu.com/s/1i5gPRKh 密码: r61m

效果演示《HTML5模拟微信摇一摇特效代码》

这个代码能帮我们实现什么呢？最常见的莫过于企业站和医疗站在移动端摇一摇打开咨询窗口了，但是在使用的过程中，361源码网发现，通过上面打开新连接方法是无法正确返回到上一页的，也就是一旦摇一摇打开聊天窗口，就无法返回网站了，这算是一个用户体验极差的设定，我们继续优化。

以商务通为例，我们可以先定义一个打开商务通的函数swt()

//商务通引用（启用商务通时开启,商务通自带js请自行引用function swt(e){       if(e!="" && e!=null){        openZoosUrl('chatwin','&e='+escape(e));        LR_HideInvite();        return false;    }else{        openZoosUrl();        LR_HideInvite();        return false;    }}

在摇一摇时，直接执行此函数（完整js代码）：

//先判断设备是否支持HTML5摇一摇功能if (window.DeviceMotionEvent) {//获取移动速度，得到device移动时相对之前某个时间的差值比window.addEventListener('devicemotion', deviceMotionHandler, false);}else{alert('您好，你目前所用的设置好像不支持重力感应哦！');}//设置临界值,这个值可根据自己的需求进行设定，默认就3000也差不多了var shakeThreshold = 3000;//设置最后更新时间，用于对比var lastUpdate = 0;//设置位置速率var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0;function deviceMotionHandler(event){//获得重力加速var acceleration =event.accelerationIncludingGravity;//获得当前时间戳var curTime = new Date().getTime();if ((curTime - lastUpdate)> 100) {//时间差var diffTime = curTime -lastUpdate;lastUpdate = curTime;//x轴加速度curShakeX = acceleration.x;//y轴加速度curShakeY = acceleration.y;//z轴加速度curShakeZ = acceleration.z;var speed = Math.abs(curShakeX + curShakeY + curShakeZ - lastShakeX - lastShakeY - lastShakeZ) / diffTime * 10000;if (speed > shakeThreshold) {//播放音效shakeAudio.play();//商务通传参swt('M站通用-摇一摇-咨询');}lastShakeX = curShakeX;lastShakeY = curShakeY;lastShakeZ = curShakeZ;}}//预加摇一摇声音var shakeAudio = new Audio();//摇一摇声音路径shakeAudio.src = '/sound/shake_sound.mp3';var shake_options = {preload : 'auto'}for(var key in shake_options){if(shake_options.hasOwnProperty(key) && (key in shakeAudio)){shakeAudio[key] = shake_options[key];} }

这样就完美实现摇一摇打开咨询连接了，十分方便。经过测试发现IOS：Safari 弹框/不播放音乐, Chroma 弹框/不播放音乐,UC弹框/不播放音乐。Andriod：UC弹框/播放音乐,Chroma 弹框/播放音乐,内置浏览器弹框/播放音乐。至于其他链接，大家可自行扩展，代入即可。

此文为转载，如果有版权归属，请发函至本站邮箱，我们会在最短时间内处理。

以上就是移动端网页实现摇一摇打开咨询连接的方法的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持错新网。