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. MySQL crash-safe replication【转载】

    本文来自david大神的博客,innodb技术内幕的作者. http://insidemysql.blog.163.com/blog/static/202834042201385190333/ MyS ...

  2. chrome版本与对应的谷歌驱动（chromedriver）

    chrome版本与对应的谷歌驱动(chromedriver) 1.下载chromedriver:http://chromedriver.storage.googleapis.com/index.htm ...

  3. python 字符串、列表和元祖之间的切换

    >>> s=['http','://','www','baidu','.com'] >>> url=''.join(s) >>> url 'htt ...

  4. C++了解free和delete

    (转自:http://www.cnblogs.com/mrye/archive/2012/09/01/2667079.html) void MyMethod1() {     using namesp ...

  5. SLAM最近的工作

  6. 代码调试--自定义一个简单的debug函数

    function debug(){ $num_args = func_num_args(); //实参个数 $arg_list = func_get_args(); //返回某一个实参,必须是实参数组 ...

  7. 【Java】-NO.14.Java.4.Java.1.001-【Java JUnit 5 】-

    1.0.0 Summary Tittle:[Java]-NO.14.Java.4.Java.1.001-[Java JUnit 5 ]- Style:Java Series:JUnit Since:2 ...

  8. https://sweetalert2.github.io/

    https://sweetalert2.github.io/

  9. RabbitMq入门详解

    因为项目中需要用到RabbitMq,所有花时间研究了下,虽然博客园已经有前辈写了关于RabbitMq的文章.但还是有必要研究下! 什么是RabbitMq? 百度解释:MQ全称为Message Queu ...

  10. centos执行-查看,复制,删除-命令的脚本

    ==================================================================================================== ...