jQuery | mousemove() 示例

介绍

mousemove()是jQuery提供的一个事件监听函数，它可以监听鼠标在指定元素上移动的事件。可以用它来实现一些鼠标移动相关的功能，如拖拽、画图、鼠标提示等。

语法

$(selector).mousemove(function)

参数说明:

• selector：用于指定监听事件的元素。
• function：当鼠标移动时所要执行的函数。

示例

以下是一个简单的mousemove()示例，鼠标在指定元素上移动时会在控制台输出鼠标的坐标：

<div id="myDiv" style="height:200px;width:200px;background-color:#ccc;"></div>
<script>
    $('#myDiv').mousemove(function(event) {
        console.log("X坐标: " + event.pageX + ", Y坐标: " + event.pageY);
    });
</script>

上面的代码中，我们用mousemove()函数监听了id为myDiv的元素上的鼠标移动事件。在函数中，我们通过event.pageX和event.pageY得到了鼠标当前的坐标，并通过console.log()函数将它们输出到控制台上。

进阶示例

接下来让我们看一个进阶一些的示例，它可以在一个拖拽元素上实现拖拽功能：

<div id="dragDiv" style="height:50px;width:50px;background-color:red;position:absolute;top:50px;left:50px;"></div>

<script>
    // 记录鼠标在拖拽元素内的相对位置
    var offsetX, offsetY;

    // 标记鼠标是否按下
    var isMouseDown = false;

    // 获取元素的当前坐标
    function getPosition(el) {
        var rect = el.getBoundingClientRect();
        return {
            left: rect.left + document.body.scrollLeft,
            top: rect.top + document.body.scrollTop
        };
    }

    // 获取元素的当前样式（left/top）
    function getCurrentStyle(el) {
        return {
            left: parseInt(el.css('left')),
            top: parseInt(el.css('top'))
        };
    }

    // 实现拖拽功能的主函数
    function drag(event) {
        if (isMouseDown) { // 如果鼠标按下
            var position = getPosition($('#dragDiv')[0]);
            var newX = event.pageX - offsetX;
            var newY = event.pageY - offsetY;
            $('#dragDiv').css({
                'left': newX - position.left,
                'top': newY - position.top
            });
        }
    }

    // 鼠标按下时开始拖拽
    $('#dragDiv').mousedown(function(event) {
        offsetX = event.pageX - getCurrentStyle($('#dragDiv')).left;
        offsetY = event.pageY - getCurrentStyle($('#dragDiv')).top;
        isMouseDown = true;
    });

    // 鼠标释放时结束拖拽
    $(document).mouseup(function() {
        isMouseDown = false;
    });

    // 拖拽过程中运行主函数
    $(document).mousemove(drag);
</script>

在这个示例中，我们创建了一个可以拖拽的元素，当鼠标按下并在元素上移动时，它会跟随鼠标移动。整个拖拽过程的实现主要分为以下几个步骤：

1. 记录鼠标点击位置和元素当前位置之间的相对位置。
2. 当鼠标移动时，获取鼠标当前位置和相对位置，计算出元素的新位置并更新。
3. 当鼠标释放时，停止拖拽。

这个示例中，mousemove()函数监听了整个文档的鼠标移动事件，当鼠标按下时它会开始调用drag()函数。在drag()函数中，我们通过event.pageX和event.pageY获取鼠标当前的坐标，并通过计算得到元素新的位置。最后，我们又通过css()函数将元素位置更新到页面上。

总结

mousemove()是一个十分实用的事件监听函数，在实现一些拖拽、画图等鼠标移动功能时可以大显身手。如果你还没有使用过它，赶紧去试试吧。