基于JQuery实现鼠标滑过（类似hover）图片（或Canvas），实时获取鼠标坐标位置

最新推荐文章于 2022-04-16 12:39:07 发布

苑先森

最新推荐文章于 2022-04-16 12:39:07 发布

阅读量2.7k

点赞数 1

分类专栏：技术分享文章标签： jquery vue.js javascript

本文链接：https://blog.csdn.net/yuantao18800/article/details/115628936

版权

技术分享专栏收录该内容

20 篇文章 0 订阅

订阅专栏

前言：

尝试制作web端物体标注的时候，虽然利用Canvas可以标注物体，但缺少像LabelImg那样可以利用十字星定位鼠标起点的辅助功能。一直认为可以通过鼠标hover事件实时获取鼠标位置，尝试后无果！最后换个思考方式，解决！直接上代码；

<!DOCTYPE html>
<html>
<head>
    <title>基于JQuery实时获取鼠标坐标Demo</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div style="width:300px;">
        <div><img src="../00068.jpg" height="480" width="640" alt="" /></div>
        <div style="padding-top:20px;">
            <div id="coord"></div>
        </div>
    </div>
</body>

<script>
    $(document).ready(function() {
        function click(){
            $('img').click(function(e) {
            var offset = $(this).offset();
            var X = (e.pageX - offset.left);
            var Y = (e.pageY - offset.top);
            $('#coord').text('X: ' + X + ', Y: ' + Y);
        });
        }

        function hover() {
            $('img').on("mousemove", function(e) {
            var offset = $(this).offset();
            var X = (e.pageX - offset.left);
            var Y = (e.pageY - offset.top);
            $('#coord').text('X: ' + X + ', Y: ' + Y);
        });
        }
        // 开启点击显示鼠标当前坐标
        // click();
        // 开启鼠标滑过实时显示鼠标坐标
        hover();
    });
</script>

</html>

苑先森

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于JQuery实现鼠标滑过（类似hover）图片（或Canvas），实时获取鼠标坐标位置

前言：尝试制作web端物体标注的时候，虽然利用Canvas可以标注物体，但缺少像LabelImg那样可以利用十字星定位鼠标起点的辅助功能。一直认为可以通过鼠标hover事件实时获取鼠标位置，尝试后无果！最后换个思考方式，解决！直接上代码；<!DOCTYPE html><html><head> <title>基于JQuery实时获取鼠标坐标Demo</title> <script type="text/javascr
复制链接

扫一扫