| 标题 | html5摇一摇代码优化包括DeviceMotionEvent等等 |
| 内容 | 首先对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); } 现在就完美了 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。