最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
html5图片随手机重力感应而移动效果制作教程
时间:2017-01-04 编辑:简简单单 来源:一聚教程网
实现方法一:重力感应
html和css如下:
加载函数如下:
代码如下 | 复制代码 |
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); } |
实现方法二:parallax插件模拟
parallax这个插件,可以模拟设备感应,手势感应!
html代码如下:
可以通过data-depth 设置感应的深度!
可以通过js方式书写:
代码如下 | 复制代码 |
var scene = document.getElementById('scene'); var parallax = new Parallax(scene); |
也可以通过jquery方式书写:
代码如下 | 复制代码 |
$('#scene').parallax(); |
-
上一个: bootstrap表格分页实例代码分享
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31