手机
当前位置:查字典教程网 >网页设计 >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 CSS过度-webkit-transition使用介绍

html5时钟实现代码

html5教程制作简单画板代码分享

html5贪吃蛇游戏使用63行代码完美实现

html5 Canvas画图教程(1)—画图的基本常识

html5开发之viewport使用

html5读取本地文件示例代码

html5 更新图片颜色示例代码

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

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

精品推荐
分类导航