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. PropTypes使用

    PropTypes防止后期代码传参数错误,所以加一个校验, 代码: import React, {Component,PropTypes} from 'react'; import {View, Te ...

  2. MySQL 5.7 的SSL加密方法

    MySQL 5.7 的SSL加密方法 MySQL 5.7.6或以上版本 (1)创建证书开启SSL验证--安装opensslyum install -y opensslopenssl versionOp ...

  3. webpack打包多个入口文件

    打包后的目录结构: webpack.config.js // path 模块提供了一些用于处理文件路径 const path = require('path'); // fs模块用于对系统文件及目录进 ...

  4. SSM基础整合

    1.表现层: 依赖jar包:spring+JSP+文件上传组件+dubbo+fastdfs web.xml配置:乱码过滤器+DispatcherServlet前端控制器 <!-- 配置post乱 ...

  5. [LeetCode] 747. Largest Number At Least Twice of Others_Easy

    In a given integer array nums, there is always exactly one largest element. Find whether the largest ...

  6. [Guitar self-practising] 【吉他练习王-节奏练习】曲目1 基本扫弦节奏练习

    这本书来自吉他练习王-节奏练习, 大家可以自行到网上搜搜电子版看看. 扫弦练习: 将左手轻轻靠着琴弦, mute琴弦.右手拿上拨片, 节拍器60,左脚踏着节拍练习. note: 注意 “轻”(幅度轻, ...

  7. 设置sqlplus不显示除查询结果外的信息

    背景:客户提出一个需求,写SQL脚本的时候,内容是拼接的,如何将这个拼接SQL执行的结果取出来调用执行呢? 我想到的方案是先把结果取出来,存为一个中间文件,再调用该文件即可. 知识点:如何将sqlpl ...

  8. 原生js---ajax---post方法传数据

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. MyBatis基础入门《八》查询参数传入Map

    MyBatis基础入门<八>查询参数传入Map 描述: 在执行select查询数据的时候,方法传入的参数是java.util.Map类型. 接口方法: xml文件 注意: 书写SQL语句的 ...

  10. python 定义类 简单使用

    在test.py文件里面 #coding=utf-8 #类的定义 class user: #定义私有属性 __name = '' __age = 0 #定义基本属性 sex = '' #定义构造函数 ...