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图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 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
基于文本的访客签到簿
2006/10/09 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
拉丁舞学习者的自我评价
2013/10/27 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
工作失误检讨书
2015/01/26 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
JS class语法糖的深入剖析
2022/07/07 Javascript