h5写的指南针(DeviceOrientation )，调用手机罗盘,可以转动

相信这个demo有很多人写过的，简单的不说了。本例的demo非常简短，还配了个漂亮了图片(图是在某图库网下载的，只用于开发技术学习，禁用于商业)；没什么好介绍的，可以直接复制代码使用，下面贴个效果图

下面贴代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script type="text/javascript" src="http://xxiaoyuan.top/jquery-1.9.1.js" ></script><style type="text/css">*{padding: 0;margin: 0 auto;}body{background-color: #333;}.compass{position: relative;}.compass img{width: 100%;}.compass .pa{position: absolute;top: 0;left: 0;z-index: -1;}.compass .pa_p {color: #e46f19;font-size: 40px;top: 100%;left: 50%;transform: translateX(-50%);z-index: 1;}.box{width: 90%;margin: 20% auto;}</style></head><body><div class="box"><div class="compass"><img src="./img/a0.png"><img class="pa" src="./img/a2.png" id="compass"><img class="pa" src="./img/a3.png"><div class="pa pa_p"><span id="alpha"></span>°</div></div></div></body><script>    var alpha = ""var ua = navigator.userAgent.toLowerCase();if(/android/.test(ua)) {window.addEventListener('deviceorientationabsolute', DeviceOrientationHandler, false);function DeviceOrientationHandler(event) {document.getElementById("alpha").innerHTML = Math.round(360 - event.alpha);$('#compass').css('transform','rotate(-'+Math.round(360 - event.alpha)+'deg)')         }} else {window.addEventListener('deviceorientation', DeviceOrientationHandler, false);function DeviceOrientationHandler(event) {               document.getElementById("alpha").innerHTML = event.webkitCompassHeading;  $('#compass').css('transform','rotate(-'+event.webkitCompassHeading+'deg)')      }}</script>
</html>

手机扫描可以演示demo：

h5写的指南针(DeviceOrientation )，调用手机罗盘,可以转动相关推荐

H5通过navigator.mediaDevices.getUserMedia调用手机摄像头
navigator.mediaDevices.getUserMedia 应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能.打开getUserMedia文档,链接如下: https://d ...
H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头,完成拍照,实时上传(旧) 项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求. 今天,就通过一个小的案例,演示一下完整的实现流程 ...
h5调用手机摄像头获取图片用于人脸识别
h5调用手机摄像头获取图片用于人脸识别 1.安卓手机获取前置摄像头,并在video标签显示注:navigator.mediaDevices.getUserMedia文档说明兼容Safari11,实测 ...
H5调用手机发短信和打电话功能
前言本来感觉用H5写调用电话拨号功能和发送短信功能会很不好写,后来通过实践得出,其实很简单的. 首先简单介绍一下业务功能,就是显示通讯录中的人员用户信息,然后分别点击相应的按钮来发送短信和拨通电话 ...
H5调用手机振动实现
最近在开发微信公众平台时,有一个需求是通过摇一摇进行互动活动,刚开始以为要用微信内的摇一摇功能,但是微信根本没有提供接口(摇一摇是调用手机硬件,根本不能调用),所以只能换一种思路,微信可以跟我们的服务 ...
H5调用手机拨打电话的功能
里面加上: <meta name="format-detection" content="telephone=yes"/> 需要拨打的电话: < ...
H5页面调用手机打电话功能
里面加上: <meta name="format-detection" content="telephone=yes"/> 需要拨打电话的地方: & ...
混合开发中，H5页面如何监听Android手机返回键
1. 前言混合开发中,如果当前操作的页面是H5写的.那么这个时候点击Android手机返回键,默认是返回到上一个页面,跟浏览器的回退功能是一样的,都是返回到历史记录中的前一个记录.看着好像没啥问题, ...

h5写的指南针(DeviceOrientation )，调用手机罗盘,可以转动

手机扫描可以演示demo：

h5写的指南针(DeviceOrientation )，调用手机罗盘,可以转动相关推荐

最新文章

热门文章