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)";
}