跨平台移动开发_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/ ...

随机推荐

&&和&（||和|）区别
上代码,引出问题 public class Test { private static int j = 0; private static Boolean methodB(int k) { j += ...
2014江西理工大学C语言程序设计竞赛高级组题解
1001 Beautiful Palindrome Number 枚举回文数字前半部分,然后判断该数字是否满足,复杂度为O(sqrt(n))! 1002 Recovery Sequence 本题的核 ...
[Spring Data MongoDB]学习笔记－－建立数据库的连接
1. 有了上一篇的Mongo后,连接数据库我们还需要更多的信息,比如数据库名字,用户名和密码等. 我们可以继续来配置MongoDbFactory的实例. public interface MongoD ...
POJ3090
Visible Lattice Points Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7094 Accepted: ...
docker openvas
https://hub.docker.com/r/mikesplain/openvas/ Requirements DockerPorts available: 443, 9390, 9391 Usa ...
ECMAScript6面对大于0xFFFF的Unicode字符如何正确返回长度
一.match() 1.定义 match()方法用于检索字符串内指定(字符串或正则)的值,返回指定值的数组,若找不到,返回null. 2.语法 str.match(searchvalue) str.m ...
ehcache.xml配置详解
一:配置文件案例 <ehcache>  ...
MySQL权限系统(三).权限表 Grant Tables
7.2.2 Grant Tables 授权表 The mysql system database includes several grant tables that contain informat ...
python基础——函数参数
课上老师已经讲过函数(func)的参数(args)传递. 之前学习了根据位置传递对应的参数,下面会介绍其他参数传递方式. 之前的位置传参: def f(a,b,c): return a+b+c pri ...
004-ibus输入法，快捷键，浏览器
一.输入法用 root 身份在终端下,运行下面命令: yum install ibus-pinyin ibus ibus-gtk ibus-qt 使用im-chooser命令,选择ibus为默认输入 ...

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

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

随机推荐

热门专题