html5摇一摇代码优化
首先对DeviceMotionEvent进行优化;
去除没用的代码,又一次封装DeviceMotionEven
if(window.DeviceMotionEvent) {
var speed = 25;//定义一个数值
var x = y = z = lastX = lastY = lastZ = 0;//重置全部数值
window.addEventListener('devicemotion', function(){
var acceleration =event.accelerationIncludingGravity;//将传感值赋给acceleration
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) {
// TODO:在此处能够实现摇一摇之后所要进行的数据逻辑操作
donghua(); }
lastX = x;
lastY = y;
lastZ = z;
}, false);
}
因为实际项目中有非常多需求无法非常好的实现。
比方:动画不运行完成就不能继续运行DeviceMotionEvent事件;
所以做了进一步优化;
var f=1;
function donghua(){
//动画事件
$(".img").animate({left:'0',opacity:'1'},700,function(){f=1;}); })。
if(window.DeviceMotionEvent) {
var speed = 25;//定义一个数值
var x = y = z = lastX = lastY = lastZ = 0;//重置全部数值
window.addEventListener('devicemotion', function(){
var acceleration =event.accelerationIncludingGravity;//将传感值赋给acceleration
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) {
// TODO:在此处能够实现摇一摇之后所要进行的数据逻辑操作
if(f==1){
donghua();
f=0;
}
}
lastX = x;
lastY = y;
lastZ = z;
}, false);
}
如今就完美了
html5摇一摇代码优化的更多相关文章
- HTML5实现摇一摇
一.原理: 利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比 二.效果图: 三.源码: //先判断设备是否支持HTML5摇一摇功能 if (window.Dev ...
- html5实现摇一摇功能
原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Even ...
- html5实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- html5摇一摇[转]
写在前面 年底了,有些公司会出一个摇奖的活动,今天在家没事就搜了一下这方面的资料. 原文地址:http://www.cnblogs.com/waitingbar/p/4682215.html 测试 效 ...
- 用HTML5实现手机摇一摇的功能(转)
在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- js html5 仿微信摇一摇
看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...
- HTML5实现“摇一摇”效果
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...
随机推荐
- Ioc 之 Unity的AOP功能
前面我们介绍了Unity的依赖注入功能,现在来介绍下Unity的AOP功能.AOP是面向切面编程,它能够使我们在不改变现有代码结构的情况下额外的为其添加一些功能. 我们还是使用配置文件来对类型进行注入 ...
- STL || Gym 101653U Top 25
一组字符串给出两种排列方式, 求最小分成多少组 如 A A B C C D D B E E 则分成3组 A B C D E 即为1 3 1 #include < ...
- css--字体和文本样式
文字样式属性 字体:font-family 文字大小:font-size 文字颜色:font-color 文字粗细:font-weight 文字样式:font-style font-family字体属 ...
- [题解] codevs 1486 愚蠢的矿工
http://codevs.cn/problem/1486/ 我们比较熟悉二叉树,题目中给出的是一棵多叉树,我们需要将这可二叉树改造成二叉树. 二叉树可以为这样的: 父亲结点左边储存儿子,右边储存兄弟 ...
- mysql多源复制安装
多源复制的意思是多主一从. 多源复制的前提是必须要开启GTID模式. master1 :192.168.1.110 master2 :192.168.1.111 slave :192.168.1.15 ...
- pwntools各使用模块简介
pwntools pwntools 是一款专门用于CTF Exploit的python库,能够很方便的进行本地与远程利用的切换,并且里面包含多个模块,使利用变得简单.可以在github上直接搜索pwn ...
- 【07】QQ群管理公告小结:
[07]QQ群管理公告小结: 01,请看公告遵守相关规定. 02,群内除QQ自带的缺省表情外(不是QQ的VIP或大图表情),禁止发送大表情,大图片(展示问题的屏幕截图除外), 03,修改群名片 ...
- 一张图表,人人都能建立自己的AARRR运营模型
每次跟同行聊运营,聊用户,聊产品,最后都会回到AARRR模型上来,这个用户全生命周期模型概括了互联网产品运营的5个关键环节. 获客是运营的基础,促进用户活跃才能让产品有生命力,提升留存减少流失让用户规 ...
- 【模板】prim的heap优化
简单的代码.. 时间复杂度为O((n + m)logn) 大部分情况下还是跑不过kruskal的,慎用. #include <cstdio> #include <queue> ...
- POJ 1276 Cash Machine 【DP】
多重背包的模型,但一开始直接将N个物品一个一个拆,拆成01背包竟然T了!!好吧OI过后多久没看过背包问题了,翻出背包九讲看下才发现还有二进制优化一说........就是将n个物品拆成系数:1,2,4, ...