首先对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摇一摇代码优化的更多相关文章

  1. HTML5实现摇一摇

    一.原理: 利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比 二.效果图: 三.源码: //先判断设备是否支持HTML5摇一摇功能 if (window.Dev ...

  2. html5实现摇一摇功能

    原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Even ...

  3. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  4. html5摇一摇[转]

    写在前面 年底了,有些公司会出一个摇奖的活动,今天在家没事就搜了一下这方面的资料. 原文地址:http://www.cnblogs.com/waitingbar/p/4682215.html 测试 效 ...

  5. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

  6. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  7. js html5 仿微信摇一摇

    看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...

  8. HTML5实现“摇一摇”效果

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  9. 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...

随机推荐

  1. python之range (范围)

    例题: for i in range(10): print(i,end='') # 输出结果 0123456789 # s = range(1,10) # 面试大坑 python2 和 python3 ...

  2. postman使用--环境变量

    变量 postman提供了变量设置,有四种变量类型本地变量全局变量环境变量 数据变量 什么是环境变量 环境变量指在不同环境,同一个变量值随着环境不同而变化,比如在测试环境时,host为:dev.pos ...

  3. FastDFS和集中存储方式对比

    指标 FastDFS   NFS  集中存储设备如NetApp.NAS 线性扩容性  高  差  差 文件高并发访问性能 高 差  一般 文件访问方式 专有API POSIX  支持POSIX 硬件成 ...

  4. Android典型界面设计-访网易新闻实现双导航tab切换

    一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...

  5. 深入Linux内核架构——进程虚拟内存

    逆向映射(reverse mapping)技术有助于从虚拟内存页跟踪到对应的物理内存页: 缺页处理(page fault handling)允许从块设备按需读取数据填充虚拟地址空间. 一.简介 用户虚 ...

  6. js 异步编程方案

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise http://www. ...

  7. 条款30:透彻了解inline的里里外外(understand the ins and outs of inlining)

    NOTE: 1.将大多数inline限制在小型 被频繁调用的函数身上.这可使日后的调试过程和二进制升级(binary upgradability)更容易,也可使潜在的代码膨胀问题最小化, 使程序的速度 ...

  8. <c:foreach> <c:forTokens>

    <c:choose>标签与Java switch语句的功能一样,用于在众多选项中做出选择. switch语句中有case,而<c:choose>标签中对应有<c:when ...

  9. selenium,phantomJS,python整合的一个小示例,把某个网页画面整体保存成图片格式。

    本篇将使用selenium,phantomJS和python制作的一个示例,把某个网页整体保存为一个图片文件. 简单介绍下,selenium是一个开源的用于测试web程序的工具,当然,如果你要执行一些 ...

  10. coraldraw快捷键

        显示导航窗口(Navigator window) [N] 运行 Visual Basic 应用程序的编辑器 [Alt]+[F11]  保存当前的图形 [Ctrl]+[S]  打开编辑文本对话框 ...