查看: 1230|回复: 19

[技术交流] 基于 HTML5 的指南针和水平仪,代码分享

[复制链接]
发表于 2016-10-10 16:46:44 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>H5Compass</title>
  6.     <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7.     <style type="text/css">
  8.       html, body {
  9.         height: 100%;
  10.         width: 100%;
  11.         margin: 0;
  12.         padding: 0;
  13.         width: 320px;
  14.         height: 568px;
  15.         overflow: hidden;
  16.       }
  17.       body {
  18.         position: relative;
  19.       }
  20.       #compass, #gradienter {
  21.         width: 320px;
  22.         height: 568px;
  23.         position: absolute;
  24.         top: 0;
  25.         left: 0;
  26.         transition: left 218ms;
  27.       }
  28.       #gradienter {
  29.         left: 320px;
  30.       }
  31.       .nav {
  32.         list-style: none;
  33.         padding-left: 0;
  34.         position: absolute;
  35.         top: 500px;
  36.         left: 160px;
  37.         margin-left: -15px;
  38.       }

  39.       .nav li {
  40.         height: 8px;
  41.         width: 8px;
  42.         border-radius: 4px;
  43.         background-color: rgba(255, 255, 255, .4);
  44.         display: inline-block;
  45.       }
  46.       .nav li + li {
  47.         margin-left: 10px;
  48.       }
  49.       .nav li.active {
  50.         background-color: rgba(255, 255, 255, 1);
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <div id="compass"></div>
  56.     <canvas id="gradienter" width="640" height="1136"></canvas>
  57.     <ul class="nav">
  58.       <li class="active"></li>
  59.       <li></li>
  60.     </ul>
  61.     <script type="text/javascript" src="./bower_components/raphael/raphael.js"></script>
  62.     <script type="text/javascript" src="./bower_components/hammerjs/hammer.js"></script>
  63.     <script type="text/javascript" src="./index.js"></script>
  64.   </body>
  65. </html>
复制代码



znz.jpg




游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

发表于 2016-10-10 20:44:44 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2016-10-25 11:59:34 | 显示全部楼层
好利害啊,这个都可以用H5啊
回复 支持 反对

使用道具 举报

发表于 2016-10-31 10:20:36 | 显示全部楼层
好多好东西啊
回复 支持 反对

使用道具 举报

发表于 2016-11-24 10:14:12 | 显示全部楼层
学习了!多谢楼主分享
回复 支持 反对

使用道具 举报

发表于 2017-2-7 21:49:49 | 显示全部楼层
可以,想要其他的js源码
回复 支持 反对

使用道具 举报

发表于 2017-2-9 13:18:03 | 显示全部楼层
感谢分享 !!感谢分享 !!
回复 支持 反对

使用道具 举报

发表于 2017-2-13 16:56:54 | 显示全部楼层
哈哈 很牛逼  html做app我很喜欢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

网站推荐上一条 /1 下一条

关注蚂蚁HTML5社区官方微信
关注蚂蚁HTML5社区官方微信

邮箱:Admin@zzfriend.com QQ:791577401 木子牛HTML5工作室 版权所有

© 2014-2016 MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表