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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0