微信摇一摇效果HTML,JavaScript+H5实现微信摇一摇功能
项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动。也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对于我们的需求只需要摇一摇这个动作却是大相径庭。
其实H5+JavaScript写出来的页面,通过获取手机的屏幕长和宽,以及添加声音等就可以实现摇一摇的效果。
第一步,实现手机摇动改变颜色
HTML5 手机摇一摇
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);
}
手机摇一摇,改变屏幕颜色。
主要是手机的DeviceMotionEvent事件
第二步,微信摇一摇手势
相对于第一步就是增加了摇一摇手势,改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可,无论是想要进入下一个自己做的页面还是触发一个Controller事件都可以。
摇一摇
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();
});
|
|
您今天还可以摇次 |
|
正确姿势:握紧手机,用力摇动3秒,苦练18年的麒麟臂终于派上用场了。 |
有时候真的可以换一种方法去实现自己想要的功能。附图:demo本来实现的效果是:
改版之后
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信摇一摇效果HTML,JavaScript+H5实现微信摇一摇功能相关推荐
- H5和微信小程序测试区别
01 什么是H5? H5,也就是"HTML5",指"HTML"的第5个版本.众所周知"HTML"是"超文本标记语言",是 ...
- php微信摇一摇,怎样使用JS+H5实现微信摇一摇
这次给大家带来怎样使用JS+H5实现微信摇一摇,使用JS+H5实现微信摇一摇的注意事项有哪些,下面就是实战案例,一起来看一下. 项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动 ...
- 微信——H5实现微信摇一摇
项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动.也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对 ...
- H5模拟微信红包效果
H5模拟微信红包效果 技术:html+css+javascript 效果: 代码: ps:项目代码文件评论区见
- android 摇一摇+震动+声音效果
文章链接:https://mp.weixin.qq.com/s/n6EXvfmpNPtWM1kEnGgwUA 摇一摇红包效果已经是老生常谈的了,利用手机的传感器识别摇一摇,同时过程中进行动画+震动+声 ...
- h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器
之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...
- html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
- H5 集成微信自定义分享(兼容 ios android)
最近做 H5 集成微信分享踩了很多坑,多少辛酸泪只有经历了才能体会,仅以此篇文章记录其中的酸甜苦辣. 分享出去的效果大概是这样子的: 接到这个需求之后,因为之前也没有做微信相关开发的经验,于是查阅了一 ...
- 安卓微信浏览器无法支持input multiple的h5属性多图上传
H5手机端 实现多图上传的功能 但是实际上 安卓手机上只能义词上传一张图片(测试的机型:小米)代码如下: 在微信开发中遇见一个问题 应用上传插件安卓手机无法进行多张上传 当时现象: 微信浏览器选择安卓 ...
最新文章
- 奇数页分节符什么意思_删除分节符问题
- 网络信息安全之防火墙的设计 (三)
- web.config总结
- Android平台发展史
- Ueditor百度编辑器中的 setContent()方法的使用
- 怎么知道Win10的电脑是否满足Win11的硬件要求
- ajax请求可以延时吗,延时校验AJAX请求
- S5PV210 芯片降价
- python实现mat格式数据解析处理,并转化为json格式数据
- N1烧USB供电跳线修复方法
- 【学习笔记】生物数据库の初步了解
- Qgis教程07:矢量数据属性编辑
- 炫酷的生日快乐网页 【附带源码】
- 第三章 区块链进阶 [18]
- echarts 堆叠柱状图 在顶部显示数据总数
- 天亮说晚安,我们回家
- NXP bootloader
- python 画图 设置 中英文字体
- testpmd csum engine 测试 checksum hw offload
- Linux中vi命令编辑文件时显示行号
热门文章
- 创业:房多多--如何成功从红海杀出一片天空
- vue实现前端人机验证
- 【Rust日报】2022-09-11 Shuttle 创建和部署带有ShuttleSerenity的 Discord 机器人!
- 利用WinPcap模拟网络包伪造飞秋闪屏报文
- The process has been signaled with signal '5'. 解决办法
- Linux常用指令<三>
- 可以跟小伙伴联机对战的五子棋,你会吗?今天用Python教大家搞定!!快上车!
- python内turtle库应用
- EKS日志收集方案-PLG(Promtail+Loki+Grafana)
- Gartner发布2021年隐私技术成熟度曲线,数字伦理登上顶点