html5水平方向重力感应
html5图片随手机重力感应而移动
<!DOCTYPE html>
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- 默认使用最新浏览器 -->
<meta http-equiv="Cache-Control" content="no-siteapp"><!-- 不被网页(加速)转码 -->
<meta name="robots" content="index,follow"> <!-- 搜索引擎抓取 -->
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes"><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><!-- 设置苹果工具栏颜色 -->
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="full-screen" content="yes"><!-- UC强制全屏 -->
<meta name="browsermode" content="application"><!-- UC应用模式 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
<meta name="format-detection" content="telephone=no, address=no, email=no"><!-- 忽略页面中的数字识别\email识别\地址识别 -->
<title>html5水平方向重力感应-haorooms演示demo</title>
<meta name="keywords" content="前端知识 , CSS , javascript , jquery，PHP, Haorooms博客">
<meta name="description" content="Haorooms，Aaron个人博客。记录本人工作中遇到的问题，以及经验总结和分享！">
</head>
<body>
<style>
body {margin: 0; padding: 0;}
html, body { height: 100%;}
.view { position: relative; width: 100%;height: 100%;overflow: hidden;}
.big-bg { height: 120%;position: relative; display: inline-block; }
.big-bg img { height: 100%;}
</style>
<div class="view">
<div class="big-bg" style="top: -66px; left: -453px;">
<img src="https://www.cnblogs.com/images/cnblogs_com/7qin/1295985/o_haorooms.jpg" alt="" onload="readyFn();">
</div>
</div>
<script>
function readyFn() {
'use strict';
var dom = document.querySelector('.big-bg'),
img = dom.querySelector('img');
var IMG_W = img.width,
IMG_H = img.height;
var WIN_W = document.documentElement.clientWidth,
WIN_H = document.documentElement.clientHeight;
var timefragment = 0, // 时间片计时
nowts = 0; // 当前时间
// 设置默认的left/top
dom.style.top = -(IMG_H - WIN_H) / 2 + 'px';
dom.style.left = -(IMG_W - WIN_W) / 2 + 'px';
window.addEventListener('deviceorientation', function (evt) {
nowts = new Date().getTime();
// 控制时间片
if (nowts - timefragment > 37) {
timefragment = nowts;
var alpha = evt.alpha, //垂直于屏幕的轴 0 ~ 360
beta = evt.beta, //横向 X 轴 -180 ~ 180
gamma = evt.gamma; //纵向 Y 轴 -90 ~ 90
var top = parseInt(dom.style.top, 10) || 0,
left = parseInt(dom.style.left, 10) || 0;
var _top, _left;
_top = top + (beta / 180 * 30);
_left = left + (gamma / 90 * 30);
_top = _top >= 0 ? 0 : (_top < (WIN_H - IMG_H) ? (WIN_H - IMG_H) : _top);
_left = _left >= 0 ? 0 : (_left < (WIN_W - IMG_W) ? (WIN_W - IMG_W) : _left);
dom.style.top = _top + 'px';
dom.style.left = _left + 'px';
}
}, false);
}
</script>
</body></html>
转自：http://resource.haorooms.com/softshow-29-263-1.html
