国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JavaScript+H5實現微信搖一搖功能

2019-11-19 13:47:38
字體:
來源:轉載
供稿:網友

項目終于如約上線,但是在春節前又有一個新的活動要做,類似微信的搖一搖活動。也一直在做微信公眾號的東西,但是要調用微信搖一搖的接口還是有些困難,因為只提供了搖一搖周邊,附近的人以及一系列的紅包頁面,相對于我們的需求只需要搖一搖這個動作卻是大相徑庭。

其實H5+JavaScript寫出來的頁面,通過獲取手機的屏幕長和寬,以及添加聲音等就可以實現搖一搖的效果。 

第一步,實現手機搖動改變顏色

<!doctype html> <html>  <head>  <meta charset="utf-8" />  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>  <title>HTML5 手機搖一搖</title>   <script type="text/javascript">    var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');    if(window.DeviceMotionEvent) {     var speed = 25;     var x = y = z = lastX = lastY = lastZ = 0;     window.addEventListener('devicemotion', function(){      var acceleration =event.accelerationIncludingGravity;      x = acceleration.x;      y = acceleration.y;      if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {       document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];      }      lastX = x;      lastY = y;     }, false);    }   </script>  </head>  <body>     手機搖一搖,改變屏幕顏色。  </body> </html> 

主要是手機的DeviceMotionEvent事件

第二步,微信搖一搖手勢

相對于第一步就是增加了搖一搖手勢,改變了搖動事件。在搖一搖動作之后再添加自己想要的方法即可,無論是想要進入下一個自己做的頁面還是觸發一個Controller事件都可以。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">  <title>搖一搖</title>  <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/shake.css" rel="external nofollow" >  <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/myDialog.css" rel="external nofollow" >  <script type="text/javascript" src="plug-in/liuliangbao/shake/js/jquery.min.js"></script>  <script type="text/javascript" src="plug-in/liuliangbao/shake/js/howler.min.js"></script>  <script type="text/javascript" src="plug-in/liuliangbao/shake/js/fastclick.js"></script>  <script type="text/javascript" src="plug-in/liuliangbao/shake/js/myDialog.js"></script>   <script type="text/javascript">    var SHAKE_THRESHOLD = 1000;    var last_update = 0;    var last_time = 0;    var x;    var y;    var z;    var last_x;    var last_y;    var last_z;    var sound = new Howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load();    var findsound = new Howl({ urls: ['/shake/sound/shake_match.mp3'] }).load();    var curTime;    var isShakeble = true;     function init() {     if (window.DeviceMotionEvent) {      window.addEventListener('devicemotion', deviceMotionHandler, false);     } else {      $("#cantshake").show();     }    }     function deviceMotionHandler(eventData) {     curTime = new Date().getTime();     var diffTime = curTime - last_update;     if (diffTime > 100) {      var acceleration = eventData.accelerationIncludingGravity;      last_update = curTime;      x = acceleration.x;      y = acceleration.y;      z = acceleration.z;      var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;        if (speed > SHAKE_THRESHOLD && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble) {       shake();      }      last_x = x;      last_y = y;      last_z = z;     }    }     function shake() {     last_time = curTime;     $("#loading").attr('class','loading loading-show');     $("#shakeup").animate({ top: "10%" }, 700, function () {      $("#shakeup").animate({ top: "25%" }, 700, function () {       $("#loading").attr('class','loading');         findsound.play();         //在此為搖動之后的事件,這里為調用ControllergoShakeResult方法       window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}";      });     });     $("#shakedown").animate({ top: "40%" }, 700, function () {      $("#shakedown").animate({ top: "25%" }, 700, function () {      });     });     sound.play();    }     //各種初始化    $(document).ready(function () {     Howler.iOSAutoEnable = false;     FastClick.attach(document.body);     init();    });  </script> </head> <body>  <table id="container">    <tbody>        <tr>         <td class="container" colspan="2">        <div id="shake">         <img src="plug-in/liuliangbao/shake/images/inner.png" class="inner">         <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_up" id="shakeup">         <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_down" id="shakedown">          </div><div id="loading" class="loading"></div>         </td>      </tr>      <tr>       <td>        您今天還可以搖<input id="shakeCount" name="shakeCount" value="${leftcount}">次       </td>      </tr>      <tr>       <td>正確姿勢:握緊手機,用力搖動3秒,苦練18年的麒麟臂終于派上用場了。</td>      </tr>     </tbody>  </table> </body> </html>

有時候真的可以換一種方法去實現自己想要的功能。附圖:demo本來實現的效果是:

                   

改版之后

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 宜章县| 米泉市| 焦作市| 卓资县| 阳高县| 绥宁县| 建德市| 黄浦区| 鄯善县| 将乐县| 纳雍县| 边坝县| 延安市| 宜宾市| 紫金县| 海阳市| 天台县| 廊坊市| 库尔勒市| 勐海县| 老河口市| 永康市| 甘孜县| 乌苏市| 吉水县| 开远市| 和顺县| 濉溪县| 南溪县| 筠连县| 罗定市| 青川县| 靖远县| 崇仁县| 定南县| 常山县| 手游| 武功县| 修武县| 赣榆县| 隆回县|