JavaScript+H5实现微信摇一摇功能

前端之家收集整理的这篇文章主要介绍了JavaScript+H5实现微信摇一摇功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动。也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对于我们的需求只需要摇一摇这个动作却是大相径庭。

其实H5+JavaScript写出来的页面,通过获取手机的屏幕长和宽,以及添加声音等就可以实现摇一摇的效果

第一步

,实现手机摇动改变颜色

<Meta name="viewport" content="width=device-width,initial-scale=1.0"/> HTML5 手机摇一摇 手机摇一摇,改变屏幕颜色。

主要是手机的DeviceMotionEvent事件

第二步

,微信摇一摇手势

相对于第一步就是增加了摇一摇手势,改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可,无论是想要进入下一个自己做的页面还是触发一个Controller事件都可以。

<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"> 摇一摇

<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%" },function () {
$("#loading").attr('class','loading');

  findsound.play(); 
    //在此为摇动之后的事件,这里为<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>ControllergoShakeResult<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a> 
  window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}"; 
 }); 
}); 
$("#shakedown").animate({ top: "40%" },function () { 
 $("#shakedown").animate({ top: "25%" },function () { 
 }); 
}); 
sound.play(); 

}

//各种初始化
$(document).ready(function () {
Howler.iOSAutoEnable = false;
FastClick.attach(document.body);
init();
});

有时候真的可以换一种方法去实现自己想要的功能。附图:demo本来实现的效果是:

改版之后

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/32191.html

猜你在找的JavaScript相关文章