关闭

【转】利用js来实现微信摇一摇来自动更换网页背景的功能

标签: 微信摇一摇html
632人阅读 评论(0) 收藏 举报
分类:

微信推出后,他的摇一摇功能非常的火爆,没事来微信摇一摇加加好友,我们可不可以借鉴一下微信的摇一摇功能,让手机访问网页的时候,只要手机摇一摇,网页背景就会自动随时换一个网页背景。
具体想要用摇一摇的功能思路已经确认的了,现在就是来实现代码的了。我们现在是用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,它将底层的方向传感器和运动传感器进行了高级封装,提供了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>


0
0
查看评论

模仿微信摇一摇功能 利用js来实现微信摇一摇来自动更换网页背景的功能

微信推出后,他的摇一摇功能非常的火爆,没事来微信摇一摇加加好友,我们可不可以借鉴一下微信的摇一摇功能,让手机访问网页的时候,只要手机摇一摇,网页背景就会自动随时换一个网页背景。 具体想要用摇一摇的功能思路已经确认的了,现在就是来实现代码的了。我们现在是用javascript来实现摇一摇的功能。js摇...
  • zhoudelun
  • zhoudelun
  • 2015-03-31 16:11
  • 1310

js模仿微信摇一摇功能

这里介绍的只是实现摇一摇的原理以及一些主要的代码,具体界面不做描述 HTML代码 JS代码 init(); var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y ...
  • jimolangyaleng
  • jimolangyaleng
  • 2016-12-19 15:40
  • 560

模仿微信摇一摇(只模仿传感器及震动)

参考链接: 主体内容参考:http://blog.csdn.net/catoop/article/details/8051835 看到http://104zz.iteye.com/blog/1694738对应的文章时,想着应该把此功能做一个封装以下为正文(实际上就是代码) 项目地址:http...
  • lonewolf521125
  • lonewolf521125
  • 2016-07-28 14:05
  • 532

iOS仿照微信摇一摇功能实现

iOS仿照微信摇一摇功能实现一、描述 需要做一个界面,仿照微信摇一摇,获取接口进行签到功能。 首先明确以下几点: 1、需要震动。 2、需要声音。(准备好mp3音效) 二、这边直接贴代码:/ Created by 石雄伟 on 16/7/29. // Co...
  • IDOshi201109
  • IDOshi201109
  • 2016-08-27 01:51
  • 1678

JS+H5实现微信的摇一摇功能

JS+H5实现微信的摇一摇功能<script type="text/javascript"> var SHAKE_THRESHOLD = 5000; var last_update = 0; var x, y, z, las...
  • qq_26291823
  • qq_26291823
  • 2016-07-14 13:52
  • 1625

Android 微信摇一摇功能实现

开发之前 今天学习了一下传感器, 脑子里就蹦出了微信的摇一摇, 于是鼓了鼓勇气抽空写了出来, 本人菜鸟一枚, 希望大神们多多指点 开发环境 Android Studio 2.2.1 JDK1.7 API 24 Gradle 2.2.1 相关知识点 加速度传感器 补间动画 手机震动 (Vibr...
  • u013144863
  • u013144863
  • 2016-10-28 18:27
  • 3055

微信摇一摇功能的实现

最近学习了一些微信常见的部分功能,然后觉得摇一摇这个相对来说比较独特的功能来说,其中的编程思想还是挺巧妙的,我们需要的一方面设置好用户权限,一方面要配置好JAVA文件,实例如下: 包名还是老样子,你想怎么设置路径就怎么设置,根据自己的Android工程来决定的。 public class Sha...
  • Harry_suo
  • Harry_suo
  • 2015-01-14 15:36
  • 1165

[Android实例] 仿微信摇一摇功能实现

该篇文章从eoeAndroid搬迁过来的,原文地址:[Android实例] 仿微信摇一摇功能实现 前段时间,由于换了新工作,参与到公司新项目里,很忙,也没时间去弄一些好玩的东西。这些天不算忙,突然想到我在项目里仿照微信做了摇一摇功能,也就吧该功能提取出来,共享给大家。 摇一摇功能其实很简单,主...
  • krubo1
  • krubo1
  • 2016-01-05 12:02
  • 3859

对微信公众平台第三方实现功能分析

近段时间对微信公众平台进行了小小的研究。 订阅号:tx
  • yancongmin0702
  • yancongmin0702
  • 2014-04-26 07:15
  • 643

android摇一摇功能音效与振动附加微信音效大全下载

检测手机摇动通过实现SensorEventListener接口实现 振动通过Vibrator实现 音效通过SoundPool实现 微信各种音效文件下载:微信音效大全 public class MainShakeActivity extends BaseActivity implements Se...
  • shihui512
  • shihui512
  • 2016-02-29 20:31
  • 1757
    个人资料
    • 访问:17533次
    • 积分:389
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:12篇
    • 译文:1篇
    • 评论:0条
    文章分类