专注于前端开发
我们一直未放弃

html5水平方向重力感应,图片左右移动

先看一下整个效果图,使用Html5的DeviceMotionEventdevicemotion 方法实现,不使用其他插件。

特别注意:Html5方法兼容性较差,目前ios在微信浏览器可以正常运营,Safari无法正常运行,且需要支持https协议!

微信扫描二维码查看

CSS样式

body {margin: 0; padding: 0;}
html, body { height: 100%;}
.view { position: relative; width: 100%;height: 100%;overflow: hidden;}
.big-bg {  height: 100%;position: relative; display: inline-block; }
.big-bg img {  height: 100%;}

Html代码

<div class="view">
	<div class="big-bg" style="top: -66px; left: -453px;">
		<img src="https://www.zhuoxunsj.com/deviceorientation/images/fullpic.jpg" alt="" onload="readyFn();">
	</div>
</div>

Javascript代码

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

整个代码不使用任何插件,效果棒棒哒!

卓迅设计-web前端开发-前端技术开发 » html5水平方向重力感应,图片左右移动

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址