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

html5水平方向重力感应的更多相关文章

  1. 【HTML5 】手机重力与方向感应的应用——摇一摇效果

    http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...

  2. H5案例分享：html5重力感应事件

    html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...

  3. html5重力感应事件之DeviceMotionEvent

    前言 今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第 ...

  4. h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  5. 移动端html5重力感应

    下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/     http://06wjin.sinaapp.com/billd/test. ...

  6. HTML5重力感应小球冲撞动画实现教程

    今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的 ...

  7. HTML5 重力感应效果，实现摇一摇效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. cocos2dx 3.x(让精灵随着重力感应的方向移动而移动)

    // // GameScene.hpp // HelloWord // // Created by apple on 2017/1/7. // // #ifndef GameScene_hpp #de ...

  9. 【Android开发学习笔记】【第九课】重力感应

    概念 使用重力感应技术的Android游戏已经屡见不鲜,不知道自己以后会不会用到,所以先研究了一下. 在网上学习了一下,貌似没有api,所以得自己去分析手机处在怎样状态下.注意: 下面提供的demo程 ...

随机推荐

  1. python安装提示错误Could not find a version that satisfies the requirement dateutil

    今天ytkah在安装python3组件时提示如下错误,这个是缺少依赖的问题,就试着用pip3 install dateutil,但还是提示同样的错误,怎么处理呢? Could not find a v ...

  2. MySQL表操作及数据操作

    表操作 表相当于一个文件,其形式与现实中的表格相同.表中的每条记录都有相应的字段,字段就类似于表格的表头. 表操作详细: #对表进行操作(文件) #首先要切换到指定库(即文件夹)下:use db1; ...

  3. what's the python之模块

    正则表达式 首先,我们引入了正则表达式的知识.所谓正则表达式,就是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对 ...

  4. Python3学习之路~5.1 模块介绍

    1 定义 模块:用来从逻辑上组织Python代码(变量.函数.类.逻辑:实现一个功能),本质上就是.py结尾的Python文件(文件名:test.py对应的模块名:test). 2 导入方法 impo ...

  5. Delphi启动数据库连接属性对话框

    有时候需要客户端进行服务器连接配置,自己写配置窗体,总不如直接使用系统提供的使用方便快捷 例子一: //此例子有个坏处不管用户点了确定还是取消,均返回值 procedure TForm1.Button ...

  6. 20165236 《Java程序设计》第七周学习总结

    20165236 <Java程序设计>第七周学习总结 教材学习内容总结 第十一章  JDBC与MySQL数据库 1.MySQL数据库管理系统: MySQL数据库管理系统,简称MySQL,是 ...

  7. ES6语法 promise用法

    ES6语法 promise用法 function doSomething(){ return new Promise((resolve,reject)=>{ resolve('jjjj');// ...

  8. [sh]basename&dirname截取路径和文件名&case参数选项

    给出全路径,取出路径和文件名 basename使用示例 http://codingstandards.iteye.com/blog/840784 示例一 [root@web ~]# basename ...

  9. Marathon自动扩缩容(marathon-lb-autoscale)

    我们在服务里面创建如下的应用(以下是创建完复制过来的json): { "id": "/nginxtest", "cmd": null, &q ...

  10. selenium + python 测试环境搭建 (WINDOWS)

    1. 下载Python , 运行.exe -> http://python.org/getit/ 2. 下载Python Setuptools 基础包管理工具安装,官方文档参考 https:// ...