孙肖宁

获取鼠标在盒子中的位置
描述:获取鼠标在页面中某个盒子的位置。当用户鼠标放在页面中的任意一个盒子的时候,可以获取鼠标在该盒子中的具体位置,...
扫描右侧二维码阅读全文
18
2018/04

获取鼠标在盒子中的位置

描述:获取鼠标在页面中某个盒子的位置。当用户鼠标放在页面中的任意一个盒子的时候,可以获取鼠标在该盒子中的具体位置,鼠标离开之后显示为0;
原理:鼠标的位置减去盒子的位置。
实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标在盒子中的位置</title>
</head>
<style>
    .box{
        width: 300px;
        height: 300px;
        padding-top: 100px;
        background: #91B81D;
        margin: 100px;
        text-align: center;
        font: 20px/30px "华文宋体";
        cursor: pointer;
    }
</style>
<body>
<div class="box">
    鼠标在盒子中的X坐标为:0px;<br>
    鼠标在盒子中的Y坐标为:0px;
</div>
</body>
</html>
<script>
    var box = document.getElementsByClassName("box")[0];
    box.onmousemove = function (event) {
        event = event || window.event;
        var pagex = event.pageX || scroll().left+event.clientX;
        var pagey = event.pageY || scroll().top+event.clientY;
        var targetx = pagex-box.offsetLeft;
        var targety = pagey-box.offsetTop;
        this.innerHTML = "鼠标在盒子中的X坐标为:"+targetx+"px;<br>鼠标在盒子中的Y坐标为:"+targety+"px;"
    }
    box.onmouseout = function () {
        this.innerHTML = "鼠标在盒子中的X坐标为:"+0+"px;<br>鼠标在盒子中的Y坐标为:"+0+"px;"
    }
    function scroll(){
        return {
            "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>
Last modification:April 18th, 2018 at 07:14 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment