跨平台移动开发_PhoneGap 使用Accelerometer 加速器

使用Accelerometer 加速器效果图

示例代码

<!DOCTYPE html>

<html>

  <head>

    <title>

      Cude PhoneGap Demo

    </title>

    <link

        href="content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css"

        rel="stylesheet"

        type="text/css"/>

    <link href="content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" type="text/css"/>

    <script src="content/js/jquery.js" type="text/javascript">

    </script>

    <script src="content/js/jquery.mobile-1.4.0-beta.1.js" type="text/javascript">

    </script>

    <script src="content/js/cordova.js" type="text/javascript">

    </script>

    <script src="content/scripts/xui-2.2.0.min.js">

    </script>

    <script src="content/scripts/emile.js">

    </script>

    <script type="text/javascript" charset="utf-8">

      document.addEventListener("deviceready", onDeviceReady, false);

      function onSuccess(acceleration) {

        var  getCurrentAcceleration= 'Acceleration X: ' + acceleration.x + '<br />' +

        'Acceleration Y: ' + acceleration.y + '<br />' +

        'Acceleration Z: ' + acceleration.z + '<br />' +

        'Timestamp: '      + acceleration.timestamp + '<br />';

        x$('#getCurrentAcceleration').html('inner', getCurrentAcceleration);

        };

        function onError() {

          alert('onError!');

          };

          var watchID = null;

          var options = { frequency: 1000 };

          function onSuccess1(acceleration) {

            var  watchAcceleration= 'Acceleration X: ' + acceleration.x + '<br />' +

            'Acceleration Y: ' + acceleration.y + '<br />' +

            'Acceleration Z: ' + acceleration.z + '<br />' +

            'Timestamp: '      + acceleration.timestamp + '<br />';

            x$('#watchAcceleration').html('inner', watchAcceleration);

            fx(acceleration.x,acceleration.z*20 );

            //fx(acceleration.y,acceleration.z*10 );

            //fx(acceleration.timestamp);

          }

          function onError1() {

            alert('onError!');

          }

          function stopWatch() {

            if (watchID) {

              navigator.accelerometer.clearWatch(watchID);

              watchID = null;

            }

          }

          function onDeviceReady() {

            navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

            watchID = navigator.accelerometer.watchAcceleration(onSuccess1, onError1, options);

          }

        </script>

        <script>

          function initialise()

          {

            styleshow();

            dom();

            //fx(1);

          }

          //dom处理

          function  dom()

          {

          }

          function SubString(s){

            var str;                // 声明变量。

            str = s.substr(1,236); // 截取取字符串。

            return(str);           // 返回字符串。

          }

          //style  样式处理

          function styleshow()

          {

          }

          //style 动画、形变、渐变

          function fx(valueid,valuez)

          {

            valueid=valueid*1000;

            emile('box1', 'background:#008FFF;left:'+valuez+'px;padding-bottom:100px;opacity:1', {

              duration: valueid, easing: bounce

              });

              emile('box2', 'background:#C8E919;left:'+valuez+'px;padding-bottom:100px;opacity:1', {

                duration: valueid, easing: bounce

                });

                emile('box3', 'background:#AC193D;left:'+valuez+'px;top:400px;padding-bottom:100px;opacity:1', {

                  duration: valueid, easing: bounce

                  });

                  emile('box4', 'background:#008FFF;right:'+valuez+'px;padding-bottom:100px;opacity:1', {

                    duration: valueid, easing: bounce

                    });

                    emile('box5', 'background:#C8E919;right:'+valuez+'px;padding-bottom:100px;opacity:1', {

                      duration: valueid, easing: bounce

                      });

                      emile('box6', 'background:#AC193D;right:'+valuez+'px;top:200px;padding-bottom:100px;opacity:1', {

                        duration: valueid, easing: bounce

                        });

                        emile('boxb', 'left:500px;padding:10px;border:50px solid #5133AB', {

                          duration: 500,

                          after: function(){

                            emile('boxa', 'background:#D24726;left:100px;padding-bottom:100px;opacity:1', {

                              duration: valueid, easing: bounce

                              });

                            }

                            });

                          }

                          function bounce(pos) {

                            if (pos < (1/2.75)) {

                              return (7.5625*pos*pos);

                            } else if (pos < (2/2.75)) {

                              return (7.5625*(pos-=(1.5/2.75))*pos + .75);

                            } else if (pos < (2.5/2.75)) {

                              return (7.5625*(pos-=(2.25/2.75))*pos + .9375);

                            } else {

                              return (7.5625*(pos-=(2.625/2.75))*pos + .984375);

                            }

                          }

                        </script>

                      </head>

                      <body onload="initialise();">

                        <button onclick="stopWatch();">

                          停止监视动画

                        </button>

                        <div id="getCurrentAcceleration">

                          XYZ显示区

                        </div>

                        <div id="watchAcceleration">

                          XYZ显示区

                        </div>

                        <div id="box1" style="position:absolute;left:0px;background:#f00;opacity:0">

                          DIV动画区域块

                        </div>

                        <div

                            id="box2"

                            style="border:0px solid #00ff00;position:absolute;left:0px;top:200px;background:#000000">

                          DIV动画区域块

                        </div>

                        <div

                            id="box3"

                            style="border:0px solid #AC193D;position:absolute;left:0px;top:300px;background:#AC193D">

                          DIV动画区域块

                        </div>

                        <div id="box4" style="position:absolute;right:0px;background:#f00;opacity:0">

                          DIV动画区域块

                        </div>

                        <div

                            id="box5"

                            style="border:0px solid #00ff00;position:absolute;right:0px;top:200px;background:#000000">

                          DIV动画区域块

                        </div>

                        <div

                            id="box6"

                            style="border:0px solid #AC193D;position:absolute;right:0px;top:150px;background:#AC193D">

                          DIV动画区域块

                        </div>

                        <div id="boxa" style="position:absolute;left:0px;background:#D24726;opacity:0">

                          DIV

                        </div>

                        <div

                            id="boxb"

                            style="border:0px solid #00ff00;position:absolute;left:0px;top:350px;background:#362168">

                          DIV动画区域块

                        </div>

                      </body>

                    </html>

代码示例包

点击下载

声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。

作者：Mark Fan (小念头) 来源：http://cube.cnblogs.com
说明：未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有疑问，可以通过 ffgign@qq.com 联系作者，本文章采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可

跨平台移动开发_PhoneGap 使用Accelerometer 加速器的更多相关文章

跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图示例代码 <!DOCTYPE html> <html> <head> <title& ...
跨平台移动开发_PhoneGap 警告,通知,鸣叫,振动4 种通知类型
创建鸣叫使用 confirmation.beep 创建鸣叫 function playBeep() { navigator.notification.beep(1); } 创建振动使用 ...
跨平台移动开发_PhoneGap 再次点击返回键切换到桌面效果
PhoneGap 再次点击返回键切换到桌面效果相关代码 <!DOCTYPE html> <html> <head> <title> PhoneGap ...
跨平台移动开发_PhoneGap API Camera 使用摄像头采集照片.
camera对象提供对设备默认摄像头应用程序的访问. 程序运行效果相关代码 <!DOCTYPE html> <html> <head> <title> ...
跨平台移动开发_PhoneGap API 事件类型
PhoneGap API Events backbuttondevicereadymenubuttonpauseresumeonlineofflinebatterycriticalbatterylow ...
[.net 面向对象程序设计深入]（5）MVC 6 —— 构建跨平台.NET开发环境（Windows/Mac OS X/Linux）
[.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux) 1.关于跨平台上篇中介绍了MVC的发展历程,说到ASP.NET ...
全球首个全流程跨平台界面开发套件，PowerUI分析
一. 首个全流程跨平台界面开发套件,PowerUI正式发布 UIPower在DirectUI的基础上,自主研发全球首个全流程跨平台界面开发套件PowerUI(PUI)正式发布,PowerU ...
【转贴】-- 基于QT的跨平台应用开发
原帖地址:http://www.cnblogs.com/R0b1n/p/4106613.html 1 Qt简介 Qt是1991年奇趣科技开发的一个跨平台的C++图形用户界面应用程序框架.它提供给应用程 ...
新成员！Visual Studio Code --跨平台的开发工具（支持OSX, Linux 和 Windows）
原文出处:新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows) 这是我的文章备份 http://www.dotblogs.com.tw/ ...

随机推荐

Hibernate通过many-to-one元素的一对一映射
在hibernate中我们可以通过两种方式来执行一对一映射: 通过many-to-one元素标签通过one-to-one元素标签在这里,我们将通过多对一的many-to-one元素进行一对一的映射 ...
[ JS 进阶 ] 基本类型引用类型简单赋值对象引用（转）
ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型,拥有方法的类型和不能拥有方法的类型,还可以分为可变类型和不可变类型,其实这些叫法都是依据这两 ...
Android-ViewPagerIndicator框架使用——UnderlinePageIndicator
前言:UnderlinePageIndicator这个指示,是一个很小巧的东西,简单,没有那么多复杂的效果. 一:布局定义simple_underlines: <LinearLayout xml ...
centos7 更换yum源为阿里云
mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup curl -o /etc/yum.repos ...
day6笔记
一.上节回顾 list:li = [1,2,3,5,'a']增加:append:末尾加入==追加 insert:插入,在任意位置,insert(index,'内容') extend:迭代着加入,'as ...
jmeter返回结果是乱码及Unicode转中文
1.结果树中有乱码的处理方式到bin目录下面修改jmeter的配置文件使用jmeter进行压测时,如果响应数据的返回结果有乱码,则修改jmeter.properties文件中的该字段的值改为utf ...
ZOJ1119(SPF)
题目链接:传送门题目大意:一副无向图,问有多少个节点满足删除该节点后图不连通,对于每个满足条件的节点,输出节点编号及删除节点将图分为几个连通块.若没有节点满足则输出No SPF nodes 题目思路 ...
【BZOJ1731】[Usaco2005 dec]Layout 排队布局差分约束
[BZOJ1731][Usaco2005 dec]Layout 排队布局 Description Like everyone else, cows like to stand close to the ...
jQuery 遍历 (each、map)
jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止. jQuery 遍历函数 jQuery ...
巨蟒python全栈开发linux之centos2
1.一些命令回顾在vm中,右击"打开终端",输入命令ifconfig,得到的下图算是一个终端,并且我们可以看到服务器的ip是192.168.34.128 我们通过windows上 ...

跨平台移动开发_PhoneGap 使用Accelerometer 加速器

跨平台移动开发_PhoneGap 使用Accelerometer 加速器的更多相关文章

随机推荐

热门专题