使用jquery制作图片跟随鼠标效果

最新推荐文章于 2022-02-07 17:59:12 发布

长江电焊

最新推荐文章于 2022-02-07 17:59:12 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/c_whatever/article/details/82595402

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用jQuery实现图片跟随鼠标移动的效果。通过mousemove()函数监听鼠标移动并更新图片位置，结合.hover()方法处理鼠标进入和离开时的状态变化。在实现过程中，需要注意避免全局变量的使用，并确保外部JS文件在jQuery库之后引入。由于jQuery slim版本不包含动画效果，因此建议使用完整版的jQuery库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运用jqury 制作图片跟随鼠标效果

下为效果图

那个小猴子脸上本来有个鼠标的

html 框架，

注意在引用的jquery原代码不要使用slim版本的，那个没有动画效果（貌似这个没有用到动画效果）

外部的js文件必须在jquery的后面

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="aaa.css">
    <title>Document</title>
</head>
<body>
    <div><img src="https://avatar.youkuaiyun.com/D/D/9/3_c_whatever.jpg" height="300px" width="400px"></div>
    <div id="test"></div>
    <div>you have change it <span>0</span> time(s)</div>
    <button>click me </button>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="aaa.js"></script>
</body>
</html>

js文件代码

newFunction();

function newFunction() {
    var $pic = $("div:first > img");
    var $node;
    $node = $("<div id='movePic'><img src='https://avatar.youkuaiyun.com/D/D/9/3_c_whatever.jpg' height='200px' width='300px'>nice job</div>");
    $pic.after($node);
    $pic.mousemove(function (e) {
        $("#test").text(e.pageX + "---" + e.pageY);
        $node.css("left", e.pageX + 30);
        $node.css("top", e.pageY + 39);
    });
    $pic.hover(function () {
        $node.show();
    }, function () {
        $node.hide();
    });
}

使用$()方法直接创建html片段，不需要像原生js一样使用createNode,textNode什么的，

还是尽量少用全局变量

运用到了这两个jQuery的函数

1. mousemove()

https://api.jquery.com/mousemove/ 官方api文档

参数是一个函数，或句柄，这个方法能为目标元素处理鼠标在目标位置移动时需要的方法，也就是鼠标在图上动，就会不断触发这个函数，用id选择器选定并且用 .text()方法更新图片下方的x, y坐标。

2. .hover

https://api.jquery.com/hover/

接受两个函数当作参数，第一个函数是鼠标移动到目标位置时出发，第二个函数时鼠标移出目标函数时触发

运用show 和 hide 方法可以方便的修改目标节点的css属性

最主要的还是不要把创建节点，修改节点搞混，否则移动鼠标创建了一大批节点