html5图片随手机重力感应而移动效果

前言

昨天晚上，朋友分享了几个用ih5做的效果，感觉还不错！因此我用手机搜了了一下ih5的官网，发现首页就是一个还不错的效果，貌似是用重力感应来做的！感兴趣的同学可以手机搜索一下看一下这个效果！我今天稍微看了一下他们的代码，发现是用类似我之前分享的360看房这样的插件来做的！我之前的360全景看房地址：http://www.haorooms.com/post/html5_360qj 只不过他们开启了重力感应，这个效果确实不错！因此，展开脑动，看看能不能用一张全景图，配合重力感应来简单的模仿一下这个效果呢？

实现方法一：重力感应

关于重力感应 ，我之前的一篇文章也写过，不清楚的可以去补习一下：http://www.haorooms.com/post/html5_DeviceMotionEvent

今天就简单运用这个知识来写一下：

html和css如下：

<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="./image/haorooms.jpg" alt="" onload="readyFn();">
    </div>
</div>

加载函数如下：

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);
}

简单的效果预览及下载地址：http://resource.haorooms.com/softshow-29-263-1.html

请扫描二维码查看哦！

实现方法二：parallax插件模拟

parallax这个插件，可以模拟设备感应，手势感应！

html代码如下：

<ul id="scene">
  <li class="layer" data-depth="0.00"><img src="layer1.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer2.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer5.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer6.png"></li>
</ul>

可以通过data-depth 设置感应的深度！

可以通过js方式书写：

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

也可以通过jquery方式书写：

$('#scene').parallax();

具体预览及下载请看：http://resource.haorooms.com/softshow-29-264-1.html