html5摇一摇代码优化包括DeviceMotionEvent等等

 首先对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);
}

现在就完美了 

时间: 2024-09-01 02:27:22

html5摇一摇代码优化包括DeviceMotionEvent等等的相关文章

Html5+JS实现手机摇一摇功能

  Html5+JS实现手机摇一摇功能         HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 使用它我们能够很容易的实现重力感应.指南针等

HTML5 DeviceOrientation实现手机网站摇一摇功能代码

 HTML5 DeviceOrientation实现手机网站摇一摇功能代码 介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. 代码如下: <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持. // 这个特性包括两个事件: // 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据(手机所处的角度.方位和朝向等). // 2.deviceMot

HTML5使用DeviceOrientation实现摇一摇功能_jquery

HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果. DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.deviceMotion:封装了运动传感器数据的事件,可以获取手机运动

html5摇一摇[转]

写在前面 年底了,有些公司会出一个摇奖的活动,今天在家没事就搜了一下这方面的资料. 原文地址:http://www.cnblogs.com/waitingbar/p/4682215.html 测试 效果还行. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>摇一摇</title> 6 <style type="

javascript html5摇一摇功能的实现_javascript技巧

通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份.知识要点  1.DeviceMotionEvent     这是html5支持的重力感应事件,关于文档请看:http://w3c.github.io/deviceorientation/spec-source-orientation.html 事件介绍:deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角.devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系中的

HTML5实现摇一摇的效果

DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. HTML 页面上有一个div#hand,用来放置一个手摇的图片,div#result用来展示摇动后的结果信息.   <div id="hand" class="hand hand-ani

jQuery+HTML5实现手机摇一摇换衣特效_jquery

手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等.本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果. 注意,这是一篇WEB知识综合应用的文章,阅读本文前提是,您需要有HTML5,jQuery,PHP,MySQL等相关方面的基础知识. HTML 我页面中默认展示产品信息(某品牌连衣裙产品图片和文字说明),当然实际应用中可以从数据库中获取产品信息. <div id="pro" rel="1"> <p>使

HTML5与PHP+jQuery手机摇一摇换衣效果

在上一篇文章中,我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果.手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等.本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果. 注意,这是一篇WEB知识综合应用的文章,阅读本文前提是,您需要有HTML5,jQuery,PHP,MySQL等相关方面的基础知识. HTML 我页面中默认展示产品信息(某品牌连衣裙产品图片和文字说明),当然实际应用中可以从数据库中获取产品信息.   <div id="pro

通过手机Web实现手机摇一摇的功能

经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动