【html5实现摇一摇功能】的更多相关文章

html5实现微信摇一摇功能

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

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

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

Adobe Edge Animate --使用HTML5实现手机摇一摇功能

Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能也越来越丰富和完善,比如12年HTML5可支持手机摇一摇功能,本文末尾将附上有关技术问题.现在我们将讲解如何在Edge中使用HTML5实现摇一摇功能. 首先,需要注意的是,并不是所有手机都支持HTML5的摇一摇功能,以下为目前适用范围: 1.  iOS系统(包括ipad,iphone),自带safa…

HTML5的DeviceOrientation实现微信摇一摇功能

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

HTML5实现摇一摇的功能（实测后）--转

eviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息.加速度的数据将包含三个轴:x,y和z(示意如下图所 示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘).因为有些设备可能没有硬件来排除重力的 影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者 排除了重力的影响. 涉及到我们如何计算用户摇晃手机的原理了.考虑的要点…

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的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

  介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持. // 这个特性包括两个事件: // 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据(手机所处的角度.方位和朝向等). // 2.deviceMotion:封装了运动传感器的事件,可以获取手机运动状态下的运动加速度等数据. // 使…

html5 DeviceOrientation来实现手机网站上的摇一摇功能

原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容. ——————————————————— 介绍之前做两个声明: 1.以下代码可以直接运行,当然你别忘了引用jQuery才行,我可提醒了,别到时候跑不起来骂我就成: 2.下面的实现思想参照了网上的一些文章,自己做了以下整理,对代码加入了一些注释说明,本人并非原创. <html lang="zh…

使用Html5的DeviceOrientation特性实现摇一摇功能

如今非常多的手机站点上也有类似于微信一样的摇一摇功能了,比方什么摇一摇领取红包,领取礼品等等 1,deviceOrientation:封装了方向传感器数据的事件,能够获取手机静态状态下的方向数据,如手机所处的角度,方位,朝向等 2,deviceMotion:封装了运动传感器数据事件,能够获取手机运动状态下的运动加速度数据 多说无益,代码才健康: <!DOCTYPE html> <html> <head> <meta name="viewport"…

h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角.devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标.其还提供了设备在坐标系中的自转速率.若可行的话,事件应该提供设备重心处的加速信息.compassneedscalibration:用于通知Web站点使用罗盘信息校准上述事件. 5…