html5水平方向重力感应

html5图片随手机重力感应而移动

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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

posted @   笠航  阅读(700)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae