淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery是一种广泛使用的JavaScript库,用于简化HTML文档遍历和操作、事件处理、动画和Ajax等。在这篇文章中,我们将介绍如何使用jQuery实现一个点击跟着鼠标移动的效果。


$(document).ready(function(){
    $("body").on("click", function(event){
        var mouseX = event.pageX;
        var mouseY = event.pageY;
        var $pointer = $("
"); $("body").append($pointer); $pointer.css({ "position": "absolute", "left": mouseX, "top": mouseY, }); $("body").on("mousemove", function(event){ $pointer.css({ "left": event.pageX, "top": event.pageY, }); }); $("body").on("mouseup", function(){ $pointer.remove(); $("body").off("mousemove"); }); }); });

jquery点击跟着鼠标移动

以上代码是一个完整的jQuery实现,在页面上触发鼠标左键点击后,会创建一个指针(pointer)div元素,并设置它的位置为鼠标点击的位置。然后监听鼠标移动事件,实时更新指针的位置,使之跟随鼠标移动。最后监听鼠标松开事件,删除指针并停止监听鼠标移动。

代码中用到了jQuery的on、off、append和css方法,分别用于事件监听、元素创建和样式设置。通过这些简单的方法,我们可以轻松地实现一个点击跟着鼠标移动的效果。