跨平台移动开发_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 中国大陆许可协议进行许可

转载于:https://www.cnblogs.com/cube/p/3445099.html

跨平台移动开发_PhoneGap 使用Accelerometer 加速器相关推荐

安装Visual C ++进行跨平台移动开发
Visual Studio 2015 Visual Studio文档的新家是docs.microsoft.com上的Visual Studio 2017文档 . 有关Visual Studio 201 ...
《Cocos2d 跨平台游戏开发指南（第2版）》一1.9　添加动作到精灵
本节书摘来异步社区<Cocos2d 跨平台游戏开发指南(第2版)>一书中的第1章,第1.9节,作者: [印度]Siddharth Shekar(谢卡)译者: 武传海责编: 胡俊英,更多章 ...
[活动 3.30]MAUI 跨平台应用开发实战
点击上方蓝字关注我们 (本文阅读时间:4 分钟) 活动介绍 ▌MAUI 跨平台应用开发实战前端应用开发往往需要面对 iOS.Android.Windows 等多平台开发的问题.如能用一种开发工具进 ...
【.NET Core 跨平台 GUI 开发】第一篇：编写你的第一个 Gtk# 应用
本文是[.NET Core 跨平台 GUI 开发]系列博文的第一篇.该系列博文是一个关于 Gtk# 跨平台应用开发的初级随笔集合.该随笔集合介绍了 GTK 和 Gtk# 的基本信息以及开发方法,并展示 ...
《微软开源跨平台移动开发实践》团购通知
[新书推荐]<微软开源跨平台移动开发实践>带你走近微软开源开源跨平台技术大家的响应非常积极,接近400位同学想团购. 这两天通过作者李争的努力,为大家争取到了非常实惠的价格,投票结果看不 ...
【新书推荐】《微软开源跨平台移动开发实践》带你走近微软开源开源跨平台技术
上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践--利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案 ...
【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第二十一课：Cocos2D-X网格特效1-3
[麦可网]Cocos2d-X跨平台游戏开发---学习笔记第二十一课:Cocos2D-X网格特效1-3 ================================================ ...
跨平台应用开发进阶(七) ：uni-app 自定义 showToast
文章目录一.前言二.实现原理三.代码实现四.拓展阅读一.前言利用uni-app跨平台开发框架开发多终端APP时,应用HBuilder自身提供的弹窗不满足业务需求,故开发自定义弹窗组件sho ...
跨平台移动开发工具:PhoneGap与Titanium全方位比拼
PhoneGap和Appcelerator Titanium,对于封装和配置移动应用程序而言,二者都是非常受欢迎的开源JavaScript框架.本文为Appcelerator开发者Kevin Whin ...

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

跨平台移动开发_PhoneGap 使用Accelerometer 加速器相关推荐

最新文章

热门文章