html5摇一摇代码优化
首先对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);
}
如今就完美了
html5摇一摇代码优化的更多相关文章
- HTML5实现摇一摇
一.原理: 利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比 二.效果图: 三.源码: //先判断设备是否支持HTML5摇一摇功能 if (window.Dev ...
- html5实现摇一摇功能
原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Even ...
- html5实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- html5摇一摇[转]
写在前面 年底了,有些公司会出一个摇奖的活动,今天在家没事就搜了一下这方面的资料. 原文地址:http://www.cnblogs.com/waitingbar/p/4682215.html 测试 效 ...
- 用HTML5实现手机摇一摇的功能(转)
在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- js html5 仿微信摇一摇
看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...
- HTML5实现“摇一摇”效果
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...
随机推荐
- java GZIP压缩与解压缩
1.GZIP压缩 public static byte[] compress(String str, String encoding) { if (str == null || str.length( ...
- The MySQL server is running with the –secure-file-priv
show variables like '%secure%'; 将文件导出路径更改为查询到的secure-file-priv路径下 select * from table where column = ...
- Manjaro/Arch linux 安装输入法
输入命令: sudo pacman -Syu fcitx fcitx-googlepinyin fcitx-im fcitx-configtool 编辑 ~/.xprofile:# xfcitxexp ...
- jdk环境变量配置至第一个简单程序运行成功
桌面右键单击我的电脑,属性,高级,环境变量,然后再系统变量中配置(也可在用户变量中配置) 在配置环境变量时限查看是否已存在变量名称,有则添加路径,没有则创建再添加路径 /* JAVA_HOME% C: ...
- dell服务器快速设置idrac
前提:将服务器专用的idrac网络接口,连接到网络上 1.登录到服务器(即被监控的服务器). 2.安装客户端工具 yum install OpenIPMI OpenIPMI-devel OpenI ...
- QEMU支持的几种常见的镜像文件格式
qemu-img支持非常多种的文件格式,可以通过"qemu-img -h"查看其命令帮助得到,它支持二十多种格式:blkdebug.blkverify.bochs.cloop.c ...
- 关于自由拖拽完成的剪切区域(UI组件之图片剪切器)
var x, y,areaWidth,areaHeight; var down;//闪光的判断标准,很好 addEvent(canvas,'mousedown',function(e){ // con ...
- js总结(二):函数、作用域和this
function Container( properties ) { var objthis = this; for ( var i in properties ) { (function(){ // ...
- Fiddler抓包-工具介绍(request和response)
from:https://www.cnblogs.com/yoyoketang/p/6731121.html 本篇简单的介绍下fiddler界面的几块区域,以及各自区域到底是干什么用的,以便于各好的掌 ...
- Leetcode 300.最长上升子序列
最长上升子序列 给定一个无序的整数数组,找到其中最长上升子序列的长度. 示例: 输入: [10,9,2,5,3,7,101,18] 输出: 4 解释: 最长的上升子序列是 [2,3,7,101],它的 ...