js实现h5调用手机陀螺仪实现指南针效果代码-html代码-BFW代码库

js实现h5调用手机陀螺仪实现指南针效果代码

代码语言：html

所属分类：其他

代码描述：raphael+hammer实现h5调用手机陀螺仪实现指南针效果代码，电脑上没有陀螺仪，所以请在手机上打开观看效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>


<div id="compass"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/raphael.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
<script>
    //计算屏幕宽度 高度
        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;
        if (typeof pageWidth != "number") {
            if (document.compatMode == "CSS1Compat") {
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            } else {
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
        }
        var zoom = 1;
        //compass div 宽高
        var paperWidth = 300;
        var paperHeight = 300;
        var crLong = 130 * zoom;
        var crShort = 100 * zoom;
        var cdiff = paperHeight / 2 - crLong;
        var initX =.........完整代码请登录后点击上方下载按钮下载查看