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