js调用手机陀螺仪罗盘数据代码-html代码-BFW代码库

js调用手机陀螺仪罗盘数据代码

代码语言：html

所属分类：其他

代码描述：js调用手机陀螺仪罗盘数据代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css">

    <style>
        body {
          background-color:#f1f1f1;
          font:24px/1.8 normal normal  'Droid Serif', serif;
          padding:20px;
        }
        
        body .main .text {
          max-width:620px;
          min-width:320px;
          margin:0 auto;
          text-align:center;
          color:#666;
        }
        
        
        body .main .text h1 {
          padding:10px 20px;
          background-color:#F4617B;
          border-radius:10px;
          color:#fff;
          text-shadow:2px 2px 5px rgba(0,0,0,0.2);
        }
        
        body .main .text .wowauthor {
          font-size:18px;
          padding:10px 0;
          font-family:"Consolas", monaco, monospace;
        }
        
        body .main .text .wowauthor a {
          color:#26C544;
          text-decoration:none;
          border-bottom:1px dashed;
        }
        
        body .main .text .output-info {
          font-size:24px;
          margin:10px 0;
          text-align:left;
          font-family: Consolas, monaco, monospace;
        }
        
        body .main .text .output-info ul {
          list-style-type:none;
          padding:0 25px;
          text-align:center;
        }
        
        body .main .text .output-info ul li {
          display:block;
          margin:15px 0;
        }
        
        body .main .text .output-info ul li b {
          display:inline-block;
          border:4px solid rgba(0,0,0,0.2);
          border-radius:10px;
          width:60px;
          text-align:center;
          
          color:#fff;
          
          background-color:#40C469;
          box-shadow:inset 0 4px 5px rgba(255,255,255,0.5), 2px 2px 2px rgba(0,0,0,0.2);
          text-shadow:2px 2px 0 rgba(0,0,0,0.2);
        }
        
        body .main .text .output-info ul li.y_axis b {
          background-color:#478FF0;
        }
        
        body .main .text .output-info ul li.z_axis b {
          background-color:#FDB830;
        }
        
        body .main .text .output-info ul li .value {
          text-align:right;
          display:inline-block;
          width:140px;
        }
        
        
        .such_ball_much_wow {
          border-radius:50%;
          width:100px;
          height:100px;
          overflow:hidden;
          
          border:4px solid rgba(255,255,255,0.4);
          box-shadow:2px 2px 10px rgba(0,0,0,0.1);
          
          position:fixed;
          right:80%;
          top:80%;
          
          margin-left:-50px; 
          margin-top:-50px;
          
          -webkit-transition:0.4s opacity ease-in;
          -moz-transition:0.4s opacity ease-in;
          transition:0.4s opacity ease-in;
        }
        
        .such_ball_much_wow:hover {
          opacity:0.1;
        }
        
        
        .such_ball_much_wow img {
          width:140%;
          position:relative;
          left:-20px;
          height:auto;
          display:block;
        }
        
        
        .wowCircle {
          font-weight:800;
          font-family:"Comic Sans MS", 'Comic Sans';
          color:#EFA71E;
          cursor:pointer;
        }
        
        
        /* Wow Overlay */
        .wow-overlay {
          background-color:rgba(255,255,255,0.1);
          font-family:"Comic Sans MS", sans-serif;
          display:none;
        }
        
        .wow-overlay .wow {
          color:#FF6A19;
          position:absolute;
          z-index:99;
          text-shadow:1px 1px 0px rgba(0,0,0,0.0); 
        }
        
        .wow-overlay .wow.wow-1 {
          top:56px;
          left:10px;
          -webkit-transform:rotate(-45deg);
          -moz-transform:rotate(-45deg);
        }
        
        .wow-overlay .wow.wow-2 {
          color:#0AA2FA;
          top:156px;
          left:310px;
          -webkit-transform:rotate(15deg);
          -moz-transform:rotate(15deg);
        }
        
        
        .wow-overlay .wow.wow-3 {
          color:#0AFA48;
          top:456px;
          left:110px;
          -webkit-transform:rotate(-30deg);
          -moz-transform:rotate(-30deg);
        }
        
        
        .wow-overlay .wow.wow-4 {
          color:#FF0E16;
          top:50%;
          left:50%;
          -webkit-transform:rotate(-25deg);
          -moz-transform:rotate(-25deg);
        }
        
        
        .w.........完整代码请登录后点击上方下载按钮下载查看