• 在Android手机上快速制作指南针
    时间:2011-11-13   作者:佚名   出处:互联网

    本文介绍一下用Rexsee制作的指南针,方便简单,纯页面实现哦,具体内容如下。

    1.        首先找两个好看的图片,一个罗盘,一个背景;
    2.        打开传感器rexseeOrientation.start();
    3.        把方向改变时触发的事件写上:

    function onOrientationChanged(){   //方向传感器事件,即当方向发生改变时触发的动作
      var x = rexseeOrientation.getLastKnownX();
      x = 90 - x;
      document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
    }
    4.        然后是处理图片,位置一定要调整好
    <div id='Layer1'>
      <div id="northDiv"><img src="img/north.png" width="300" height="300" /></div>
      <div id="oriDiv"><img src="img/compass.png" width="260" height="260" /></div>
    </div>

    5.        贴一下具体代码

    首页HTML代码

    <html>
    <head>
     <script src='js/java.js' type="text/javascript" ></script>
    </head>
    <body>
    </body>
    </html>

    指南针页面

    <html>
    <head> <script src='js/java.js' type='text/javascript'></script>
      <style type="text/css">
    <!--
    #Layer1 {
     position:absolute;
     top:20px;
     z-index:1;
    }
    #northDiv {
     position:absolute;
     z-index:2;
    }
    #oriDiv {
     position:absolute;
     top:23px;
     left:22px;
     z-index:2;
    }
    -->
    </style>
    </head>
    <body align='center'>
    <div id='Layer1'>
      <div id="northDiv"><img src="img/north.png" width="300" height="300" /></div>
      <div id="oriDiv"><img src="img/compass.png" width="260" height="260" /></div>
    </div>
    </body>
    </html>

    java,js代码

    rexseeTitleBar.setStyle('visibility:hidden;'); //隐藏标题栏
    rexseeStatusBar.setStyle('visibility:hidden;'); //隐藏状态栏
    rexseeScreen.setScreenOrientation("portrait");// 设置为竖屏
    rexseeProgressCover.hide();

    var normalStyle = "weight:1;border-width:0;color:#FFFFFF;background-color:#000000;icon-visibility:hidden;font-size:16;";
    var normalStyle1 = "weight:1;border-width:0;color:#FFFFFF;background-color:#5d5d5d;icon-visibility:hidden;font-size:16;";
    var selectStyle = "background-color:#fe3018;";
    var city = '';
    if(!rexseeMenu.exists('titleBar')){
      rexseeMenu.create('titleBar',"border-width:0;height:35;");
      rexseeMenu.addItem('titleBar','','label:REXSEE本地;'+normalStyle);
      rexseeMenu.addItem('titleBar','javascript:changeCity();','label:'+(city==''?'北京':city)+'/切换;'+normalStyle);
      rexseeTabBars.create('titleBar');
    }
    function changeCity(){
     
    }
    if(!rexseeMenu.exists('tabBar')){
      rexseeMenu.create('tabBar',"height:55;border-width:0;");
      rexseeMenu.addItem('tabBar','javascript:createMenu();','label:定位;'+normalStyle1,'',selectStyle);
      rexseeMenu.addItem('tabBar','javascript:compass();','label:指南针;'+normalStyle1,'',selectStyle);
      rexseeMenu.addItem('tabBar','','label:推荐;'+normalStyle1,'',selectStyle);
      rexseeMenu.addItem('tabBar','','label:发布;'+normalStyle1,'',selectStyle);
      rexseeTabBars.create('tabBar','javascript:createMenu();');
    }

    function createMenu(){
      if(!rexseeMenu.exists('tabPosition')){
        rexseeMenu.create('tabPosition',"height:55;border-width:0;");
        rexseeMenu.addItem('tabPosition','','label:GPS定位;'+normalStyle1);
        rexseeMenu.addItem('tabPosition','','label:基站定位;'+normalStyle1);
        rexseeMenu.addItem('tabPosition','','label:定时启动;'+normalStyle1);
        rexseeMenu.open('tabPosition');
      }
    }

    function compass(){    //启动方向传感器
      rexseeTabBars.select('tabBar','javascript:compass();');
      rexseeOrientation.start();
      rexseeDialog.toast('准备启动');
      rexseeTransition.load('compass.html','animation-type:scale+alpha+rotate;animation-start-time:0;animation-duration:1000;animation-translate-x-from:0;animation-translate-x-to:-100;animation-translate-y-from:0;animation-translate-y-to:0;animation-scale-x-from:1;animation-scale-x-to:0;animation-scale-y-from:1;animation-scale-y-to:0;animation-alpha-from:100;animation-alpha-to:0;animation-rotate-from:-360;animation-rotate-to:0;animation-center-x:50;animation-center-y:50;');
      rexseeBrowser.go('compass.html');
    }

    function onOrientationChanged(){   //方向传感器事件,即当方向发生改变时触发的动作
      var x = rexseeOrientation.getLastKnownX();
      x = 90 - x;
      document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
    }

    网友留言/评论

    我要留言/评论

    相关文章

    对于PKI(公钥基础结构)及证书服务的理解:对于PKI及证书服务的这些概念,相信初学者会有许多迷惑的地方,那是因为其中的某些关键概念没有理解清楚,我力争以通俗易懂的方式给初学者一些启示。
    数据分析之 - DAU,MAU,及DAU/MAU专业名词解释:最近看到FaceBook上的social game分析报表,发现一些未知专业名词,比如DAU(或者dau)以及MAU(mau)这两个缩写是什么?其含义代表什么呢?分析这两个指数对我们又有什么帮助呢?
    Twitter Api文档 - 中文翻译:Twitter最近甚火,风靡全球,就连奥巴马竞选都派上了用场,可见其威力之巨大,现把twitter api文档翻译为中文,供各位爱好者使用!
    关于RFC 协议介绍:Request For Comments (RFC),是一系列以编号排定的文件。文件收集了有关因特网相关资讯,以及UNIX和因特网社群的软件文件。目前RFC文件是由Internet Society(ISOC)所赞助发行。
    BT3破解无线网络密码:没网上了?邻家小区有无限网络么?有...有密码,哈哈,这年头有密码算什么,看下面这位大虾如何破解无限网络的,不用花钱照样轻松上网,一个字“爽”~~