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学习心得分享
Aug 19 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 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基础知识介绍
2013/09/17 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
岗位职责的含义
2013/11/17 职场文书
生物技术专业求职信
2014/06/10 职场文书
单位租房协议范本
2014/12/03 职场文书
个人工作表现自我评价
2015/03/06 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
导游词之湖北武当山
2019/09/23 职场文书
python基础之模块的导入
2021/10/24 Python
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS