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


Posted in HTML / CSS onSeptember 01, 2014

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

现在就完美了
HTML / CSS 相关文章推荐
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 #HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 #HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 #HTML / CSS
html5 更新图片颜色示例代码
Jul 29 #HTML / CSS
Html5 语法与规则简要概述
Jul 29 #HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 #HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 #HTML / CSS
You might like
收集的PHP中与数组相关的函数
2007/03/22 PHP
微信支付扫码支付php版
2016/07/22 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
Python中的choice()方法使用详解
2015/05/15 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python 处理图片像素点的实例
2019/01/08 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python实现超市商品销售管理系统
2019/10/25 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python装饰器用法与知识点小结
2020/03/09 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
利用python绘制正态分布曲线
2021/01/04 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
explicit和implicit的含义
2012/11/15 面试题
学年自我鉴定范文
2013/10/01 职场文书
应届生会计电算化求职信
2013/10/03 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
学术会议开幕词
2016/03/03 职场文书