html5摇一摇代码优化

【html5摇一摇代码优化】的更多相关文章

html5摇一摇代码优化

首先对DeviceMotionEvent进行优化: 去除没用的代码,又一次封装DeviceMotionEven if(window.DeviceMotionEvent) { var speed = 25;//定义一个数值 var x = y = z = lastX = lastY = lastZ = 0;//重置全部数值 window.addEventListener('devicemotion', function(){ var acceleration =event.acceleration…

HTML5实现摇一摇

一.原理: 利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比二.效果图: 三.源码: //先判断设备是否支持HTML5摇一摇功能 if (window.DeviceMotionEvent) { //获取移动速度,得到device移动时相对之前某个时间的差值比 window.addEventListener('devicemotion', deviceMotionHandler, false); }else{ alert('您好,你目前所用的设备好像不支持…

html5实现摇一摇功能

原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion 通过DeviceMotionEvent,可以获得accelerationIncludingGravity的x,y,z属性,根据x,y,z属性的变化来判断设备是否有摇一摇的事件发生. accelerationIncludeingGravity说明: The accele…

html5实现微信摇一摇功能

在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientation事件提供了设备角度.朝向等信息).而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果. 运动事件监听 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',…

html5摇一摇[转]

写在前面年底了,有些公司会出一个摇奖的活动,今天在家没事就搜了一下这方面的资料. 原文地址:http://www.cnblogs.com/waitingbar/p/4682215.html 测试效果还行. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>摇一摇</title> <style type="text/css&qu…

用HTML5实现手机摇一摇的功能(转)

在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 使用它我们能够很容易的实现重力感应.指南针等有趣的功能,在手机上将非常有用…