跨平台移动开发_PhoneGap 使用Accelerometer 加速器
生活随笔
收集整理的這篇文章主要介紹了
跨平台移动开发_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 加速器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Server数据文件迁移
- 下一篇： display与visibility区别