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

所属分类: 网页制作 / html5 阅读数: 988
收藏 0 赞 0 分享
首先对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指南-4.使用Geolocation实现定位功能

今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

一张图片能隐含千言万语之隐藏你的程序代码

一个HTML5的视频智力游戏,开发的过程很有趣,我喜欢编程,但当实现了游戏逻辑后,我有了一个有趣的想法:为什么不想个办法把代码隐藏起来
收藏 0 赞 0 分享

HTML4和HTML5之间除了相似以外的10个主要不同

HTML5是最新的HTML标准,重新开发一个HTML5的网站,要比把一个网站从HTML4迁移到HTML5上容易的多,这是因为这两个版本之间有很大不同之处
收藏 0 赞 0 分享

HTML5 实现一个访问本地文件的实例

今天,我将向大家分享一个简单的应用,用来演示使用FileReader的方法, FileReader是HTML5里提供的一个文件操作API,需要的朋友可以了解下
收藏 0 赞 0 分享

使用HTML5的链接预取功能(link prefetching)给网站提速

HTML5的链接预取功能(link prefetching)是一个埋在沙里的宝石,至今还很少人知道它的价值,需要的朋友可以了解下
收藏 0 赞 0 分享

基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码

基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能,需要了解的朋友可以参考下
收藏 0 赞 0 分享

HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览

打开一个网页,加载完后,如果突然断网了,那么你刷新后那页面就没了,怎么阻止这种局面的发生呢?html5的出现让我们豁然开朗,接下来将为您详细解读
收藏 0 赞 0 分享

HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题

离线访问对基于网络的应用而言越来越重要,虽然所有浏览器都有缓存机制,但它们并不可靠,HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题,需要的朋友可以参考下
收藏 0 赞 0 分享

如何使用html5与css3完成google涂鸦动画

今天我们将介绍,如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后,页面中的骑手和马匹将会运动起来,需要的朋友可以了解下
收藏 0 赞 0 分享

HTML5重塑Web世界它将如何改变互联网

即将成为新标准的HTML5到底会把我们带向哪里?下面收集了开发者、程序员以及设计师的一些看法,从中可以了解到HTML5如何改变互联网,需要的朋友可以了解下
收藏 0 赞 0 分享
查看更多