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实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 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
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
phalcon框架使用指南
2016/02/23 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
python中as用法实例分析
2015/04/30 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python数学形态学实例分析
2019/09/06 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis