js摇一摇事件
今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少. 发现很有意思. 一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我.
//运动事件监听
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler,false);
}
//获取加速度信息
//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断。
//而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
var SHAKE_THRESHOLD = 8000;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0;
function deviceMotionHandler(eventData) {
if(!$('#p2').hasClass('act')){
return false;
}
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime-last_update)> 10) {
var diffTime = curTime -last_update;
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) {
// anim();
//去下一页, 执行系列的动画效果
alert('摇一摇!写自己要执行方法function()')
}
last_x = x;
last_y = y;
last_z = z;
}
}
js摇一摇事件的更多相关文章
- 利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (win ...
- 使用shake.js让你博客支持摇一摇
大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake ...
- js微信摇一摇功能以及api
一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- shake.js实现微信摇一摇功能
项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码 ...
- js检测手机摇一摇
1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandle ...
- js html5 仿微信摇一摇
看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...
- H5 DeviceMotionEvent 事件制作“摇一摇效果”
摇一摇”的效果制作主要依赖于H5的deviceMotionEvent事件 先讲怎么使用,具体的原理在后边补充 第一步:捕捉重力加速度 var acceleration = eventData.acce ...
- H5+JS实现手机摇一摇功能
在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...
- 用js实现摇一摇功能
function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemot ...
随机推荐
- VS新建工程或者新建项时 出现未定义标识符号
VS新建工程或者新建项时 出现未定义标识符号,编译之后不影响运行,但是看着很不舒服,影响效率. 解决办法:属性--->VC++目录-->包含目录-->编辑,将自己所用QT的inclu ...
- 使用QSlider
1.当绘制的线性图等需要水平拖动的时候(不用qwt里面的函数),可以用QSlider,代码如下 ui.horizontalSlider->setMaximum(); //需要拖动的越缓慢,平滑它 ...
- 实时查询系统架构:spark流式处理+HBase+solr/ES查询
最近要做一个实时查询系统,初步协商后系统的框架 1.流式计算:数据都给spark 计算后放回HBase 2.查询:查询采用HBase+Solr/ES
- 【POJ】1426 Find The Multiple
题目链接:http://poj.org/problem?id=1426 题意:给定一个正整数n,找一个比n大且能只由01构成的且能够被n整除的数. 题解:这个就是在后面添0和添1小心试探.一定要是添0 ...
- SPN扫描利用
一.利用环境: 在内网渗透的信息收集中,机器服务探测一般都是通过端口扫描去做的,但是有些环境不允许这些操作.通过利用 SPN 扫描可快速定位开启了关键服务的机器,这样就不需要去扫对应服务的端口,有效规 ...
- sql (12) HAVING
HAVING 子句在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与合计函数一起使用. 新建表 StudentSS_id Grade Name phone1 98 小明 12345 ...
- Eclipse注释快捷键、如何生成API以及可能遇到的问题解决
1.Java注释方式单行注释// 快捷键:ctrl+/多行注释/* 快捷键:shift+ctrl+/*/文档注释/** 快捷键:shift+Alt+j */ 2.生成API文档 打开index.htm ...
- Java 多线程 - 创建线程的方法 + Executors.newXXXThreadPool()缺点
java中创建线程的三种方法以及区别: https://www.cnblogs.com/3s540/p/7172146.html 通过Executor 的工具类,创建三种类型的普通线程池: https ...
- [JZOJ4665] 【GDOI2017模拟7.21】数列
题目 题目大意 给你一个数列,让你找到一个最长的连续子序列,满足在添加了至多KKK个数之后,能够变成一条公差为DDD的等差数列. 思考历程 一眼看上去似乎是一道神题-- 没有怎么花时间思考,毕竟时间都 ...
- day31 类的组合及继承,文件目录规范
Python之路,Day18 = Python基础18-面向对象继承与组合 类的继承 def talk(): print("I am come from talk..a") cla ...