手机Web实现手机摇一摇的功能

1年前 (2022-12-29)阅读143回复0
翱翔MJ
翱翔MJ
  • 管理员
  • 注册排名1
  • 经验值3309
  • 级别管理员
  • 主题531
  • 回复327
楼主

<!doctype html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <title>手机web摇一摇</title>

    <script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript">

        $(function () {

            // 定义预准备函数

            var imgs = new Array(

                'http://www.baidu.com/img/baidu_jgylogo3.gif',  // 百度logo

                'http://tongji.cnzz.com/static/img/main/cnzz-logo.gif',     // cnzz logo

                'http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png',  // QQ logo

                'http://163css.com/myweb/hihilinxuan/template/index/images/logo.gif', // 163logo

                'http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png'       // 新浪logo

             );

            // 判断手机是否运动支持传感器

            if (window.DeviceMotionEvent) {

                var speed = 25;     // 定义默认加速度,达到这个速度才执行摇一摇

 

                // x,y 表示当前的左边,

                // lastX,lastY 表示摇一摇后最后停留的坐标

                var x = y = z = lastX = lastY = lastZ = 0;

                // 监听设备运动事件

                window.addEventListener('devicemotion', function () {

                    var acceleration = event.accelerationIncludingGravity;  // 获取设备的加速度

                    x = acceleration.x;     // 获取加速度的x轴,用于计算水平水平加速度

                    y = acceleration.y;     // 获取加速度的y轴,用于计算垂直方向的加速度,同时计算正玄值

 

                    // 计算当前的加速度是否大于默认加速度

                    if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {

                        // 摇一摇换logo

                        $('body').css('background', 'url(' + imgs[Math.round(Math.random() * 10) % 5] + ') no-repeat center 120px');

                    }

                    // 重新记录最后一次值,作为下一次开始坐标

                    lastX = x;

                    lastY = y;

                }, false);

            }

        })

    </script>

</head>

<body>

<div class="picbox" id="picbox"><h1>手机摇一摇,改变LOGO</h1></div>

</body>

</html>


0
回帖

手机Web实现手机摇一摇的功能 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息