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

前言

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

实现方法一：重力感应

关于重力感应 ，我之前的一篇文章也写过，不清楚的可以去补习一下：https://www.xyhtml5.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>
<div>
<img src="https://www.xyhtml5.com/post/image/炫H5.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.xyhtml5.com/softshow-29-263-1.html

请扫描二维码查看哦！

实现方法二：parallax插件模拟

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

html代码如下：

<ul>
<li><img src="https://www.xyhtml5.com/post/html5_image_zlgy/layer1.png"></li>
<li><img src="https://www.xyhtml5.com/post/html5_image_zlgy/layer2.png"></li>
<li><img src="https://www.xyhtml5.com/post/html5_image_zlgy/layer3.png"></li>
<li><img src="https://www.xyhtml5.com/post/html5_image_zlgy/layer4.png"></li>
<li><img src="https://www.xyhtml5.com/post/html5_image_zlgy/layer5.png"></li>
<li><img src="https://www.xyhtml5.com/post/html5_image_zlgy/layer6.png"></li>
</ul>

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

可以通过js方式书写：

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

也可以通过jquery方式书写：

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

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