【转】利用js来实现微信摇一摇来自动更换网页背景的功能
2015-11-19 08:40
876 查看
微信推出后,他的摇一摇功能非常的火爆,没事来微信摇一摇加加好友,我们可不可以借鉴一下微信的摇一摇功能,让手机访问网页的时候,只要手机摇一摇,网页背景就会自动随时换一个网页背景。
具体想要用摇一摇的功能思路已经确认的了,现在就是来实现代码的了。我们现在是用javascript来实现摇一摇的功能。js摇一摇的代码如下:
http://www.itokit.com/2014/0115/75021.html
=========================================================
用javascript实现手机摇一摇
=================================================
HTML5一个重要特性就是DeviceOrientation,它将底
4000
层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:
1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation API的deviceOrientation事件来实现的。 其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。 DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴:x,y和z(示意如下图所示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。
1. [代码]监听运动传感事件
2. [代码]获取含重力的加速度
3. [代码]核心方法实现代码
HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:
1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation
API的deviceOrientation事件来实现的。
其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。
DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴:x,y和z(示意如下图所示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。
1. [代码]监听运动传感事件
2. [代码]获取含重力的加速度
3. [代码]核心方法实现代码
具体想要用摇一摇的功能思路已经确认的了,现在就是来实现代码的了。我们现在是用javascript来实现摇一摇的功能。js摇一摇的代码如下:
http://www.itokit.com/2014/0115/75021.html
<span style="font-family:Microsoft YaHei;font-size:12px;"><script type="text/javascript"> var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff'); if(window.DeviceMotionEvent) { var speed = 25; var x = y = z = lastX = lastY = lastZ = 0; window.addEventListener('devicemotion', function(){ var acceleration =event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) { document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6]; } lastX = x; lastY = y; }, false); } </script> </span>
=========================================================
用javascript实现手机摇一摇
<span style="font-family:Microsoft YaHei;font-size:12px;">if(navigator.userAgent.indexOf('iPhone')>-1) { var SHAKE_THRESHOLD =2000; } else { if(navigator.userAgent.indexOf('QQ')>-1) { var SHAKE_THRESHOLD =1000; } else { var SHAKE_THRESHOLD =4000; } } 根据手机反应的不同SHAKE_THRESHOLD值可以设置为不同的值 var last_update = 0; var x, y, z, last_x=0, last_y=0, last_z=0; function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime - last_update)> 100) { var diffTime = parseInt(curTime -last_update); last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { alert('摇一摇'); } last_x = x; last_y = y; last_z = z; } } if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } </span>
=================================================
HTML5一个重要特性就是DeviceOrientation,它将底
4000
层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:
1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation API的deviceOrientation事件来实现的。 其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。 DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴:x,y和z(示意如下图所示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。
1. [代码]监听运动传感事件
2. [代码]获取含重力的加速度
3. [代码]核心方法实现代码
HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:
1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation
API的deviceOrientation事件来实现的。
其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。
DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴:x,y和z(示意如下图所示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。
1. [代码]监听运动传感事件
<span style="font-family:Microsoft YaHei;font-size:12px;">if (window.DeviceMotionEvent) { window.addEventListener(‘devicemotion’,deviceMotionHandler, false); }</span>
2. [代码]获取含重力的加速度
<span style="font-family:Microsoft YaHei;font-size:12px;">function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; }</span>
3. [代码]核心方法实现代码
<span style="font-family:Microsoft YaHei;font-size:12px;">var SHAKE_THRESHOLD = xxx; var last_update = 0; var x, y, z, last_x, last_y, last_z; function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; var curTime = newDate().getTime(); if ((curTime – lastUpdate)> 100) { var diffTime = curTime -last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x +y + z – last_x – last_y – last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { alert(“shaked!”); } last_x = x; last_y = y; last_z = z; } }</span>
相关文章推荐
- 微信红包的技术实现原理
- 玩转微信2次开发2_微信支付开发_处理响应(微擎版)
- 微信订阅号与博客打通
- 微信开发
- 对于JAVA多线程卖票小程序的理解
- 微信支付(.NET版)
- 小程序:彩票机选神器 !
- 微信支付时body有中文无法支付出现签名错误问题
- [ZZ]SAE微信公众号PHP SDK, token一直验证失败
- 搜狗微信搜索采集
- 仿微信 发起群聊 类似样式
- 微信开发总结小站
- 创客路上,跟着嘻多猴快乐出发!
- 微信公众账号基础开发介绍一之百度云服务器使用
- ListView具有多种item布局——实现微信对话列
- Java微信开发之公众号支付接口
- 关于java过滤微信emoji表情的问题解决方法
- iOS ShareSDK如果没有安装微信,QQ点击按钮没反应,上线有可能会被苹果拒绝.
- 一次失败的微信运营活动(实际上是一个很有参考意义的产品策划经验)
- C# 微信公众平台开发(2)-- 微信菜单