微信的搖一搖功能很強大，這個利用了手機的運動傳感器裝置的功能可以做很多有趣的事情，而在一般的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://m.survivalescaperooms.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 彈框/播放音樂,內置瀏覽器 彈框/播放音樂。至于其他鏈接，大家可自行擴展，代入即可。

此文為轉載，如果有版權歸屬，請發函至本站郵箱，我們會在最短時間內處理。