手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >html5摇一摇代码优化包括DeviceMotionEvent等等
html5摇一摇代码优化包括DeviceMotionEvent等等
摘要:首先对DeviceMotionEvent进行优化;去除无用的代码,重新封装DeviceMotionEvenif(window.DeviceM...

首先对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摇一摇代码优化包括DeviceMotionEvent等等】相关文章:

HTML5 canvas实现移动端上传头像拖拽裁剪效果

html5开发之viewport使用

html5实现多文件的上传示例代码

HTML5中对contenteditable属性的解释与规定

html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题

HTML5 Video标签的属性、方法和事件汇总介绍

html5 更新图片颜色示例代码

Html5大文件断点续传实现方法

利用纯html5绘制出来的一款非常漂亮的时钟

精品推荐
分类导航