zoukankan      html  css  js  c++  java
  • 计算鼠标在盒子内的坐标

    1. 我们在盒子内点击,想要得到鼠标距离盒子左右的距离。

    2. 首先得到鼠标在页面中的坐标(e.pageX, e.pageY)

    3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)

    4. 用鼠标距离页面的坐标减去盒子在页面中的距离,得到 鼠标在盒子内的坐标

    5. 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box {
                 300px;
                height: 300px;
                background-color: pink;
                margin: 200px;
            }
        </style>
    </head>

    <body>
        <div class="box"></div>
        <script>
            // 我们在盒子内点击, 想要得到鼠标距离盒子左右的距离。
            // 首先得到鼠标在页面中的坐标( e.pageX, e.pageY)
            // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
            // 用鼠标距离页面的坐标减去盒子在页面中的距离, 得到 鼠标在盒子内的坐标
            var box = document.querySelector('.box');
            box.addEventListener('mousemove', function(e) {
                // console.log(e.pageX);
                // console.log(e.pageY);
                // console.log(box.offsetLeft);
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
            })
        </script>
    </body>

    </html>
  • 相关阅读:
    javascript 版的 MD5
    一个通用的动态加载数据例子(IE5,NS6,Mozilla 1.3b)
    javascript 版的 MD4
    javascript 版的 sha1
    用dhtml做了一个密码管理器
    java版本的escape和unescape函数
    java版的MD5
    vue:app.vue中添加监听beforeunload事件,即当浏览器窗口关闭或刷新时删除vuex中的数据
    vue设置全局样式:loadOptions
    内网穿透frp
  • 原文地址:https://www.cnblogs.com/yanlei369343/p/13951318.html
Copyright © 2011-2022 走看看