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. laravel项目thinksns+安装pc前端页面

    前面我们说了laravel项目ThinkSNS+安装,现在要安装给用户看的页面,方便他们进行一些操作,比如发表文字/提问之类,这个已经模块化了,用composer就可以完成.命令行代码如下(之前是co ...

  2. 20170718 关于Mysql 安装于虚拟机Ubuntu中，内网中Windows系统无法访问

    -- 1. 前提Mysql 已经安装在Ubuntu中 -- 2. 防火墙已经关闭 命令确认防护墙状态 -- 3.问题如果Ubuntu是基于Docker容器的环境,是否需要把Docker做端口映射? 解 ...

  3. DataTable 指定位置添加列

    dt.Columns.Add("id").SetOrdinal(指定位置);

  4. Linksys E 刷Tomato shibby

    前言 一直以来都用Linksys的无线路由器~因为它的稳定~多年来一直用Linksys自身的固件~因为之前没用它做什么特别的应用~所以一直用了下来~它的原厂固件的稳定性也从没让我操过心~近来要为用户提 ...

  5. 2017-2018-2 20165236 实验四《Android开发基础》实验报告

    2017-2018-2 20165236 实验四<Android开发基础>实验报告 一.实验报告封面 课程:Java程序设计       班级:1652班       姓名:郭金涛     ...

  6. Oracle(2)之多表查询&子查询&集合运算

    多表查询 笛卡尔积 同时查询多张表时,每张表的每条数据都要和其它表的每条数据做组合.如下栗子,我们发现产生的总记录数是 56 条,还发现 emp 表是 14 条,dept 表是 4 条,56 条正是 ...

  7. Lua 随机数生成问题

    原文链接:http://blog.csdn.net/zhangxaochen/article/details/8095007 Lua 生成随机数需要用到两个函数: math.randomseed(xx ...

  8. Shiro权限管理框架详解

    1 权限管理1.1 什么是权限管理 基本上涉及到用户参与的系统都要进行权限管理,权限管理属于系统安全的范畴,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被 ...

  9. shell的函数返回值

    1.默认function的返回值包含0 和1,执行成功,返回0,执行失败,返回1,可以采用$?来获取执行结果 2.函数如何返回字符串呢,可以采用echo函数 #!/bin/bashfunction t ...

  10. node代码打包为 exe文件---端口进程关闭demo

    最近用到 java,用tomcat起的服务,经常服务关了,对应的进程还在跑,导致再次启动服务失败,需要手动关闭进程. 使用 dos命令虽然只有两行,总是输,也很烦. netstat -ano | fi ...