zoukankan      html  css  js  c++  java
  • 0187 案例:获取鼠标在盒子内的坐标

    1. 我们在盒子内点击,想要得到鼠标距离盒子左右的距离。
    2. 首先得到鼠标在页面中的坐标(e.pageX, e.pageY)
    3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
    4. 用鼠标距离页面的坐标减去盒子在页面中的距离,得到 鼠标在盒子内的坐标
    5. 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动
    var box = document.querySelector('.box');
    box.addEventListener('mousemove', function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
    })
    
    <!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>
    
  • 相关阅读:
    swift 资料
    CI cookie 存放数组
    CI框架中 日志输出方法log_message()只允许输出字符串解决方案
    CI框架整合微信公共平台接口
    php中的 file_get_contents(‘php://input’)
    CI 框架购物车问题
    JQ 报表插件 jquery.jqplot 使用
    微信开发调试工具
    常用开源库
    字符集更改步骤,mysql乱码
  • 原文地址:https://www.cnblogs.com/jianjie/p/12184805.html
Copyright © 2011-2022 走看看