可视区域小图片跟着鼠标移动

最新推荐文章于 2022-01-02 12:12:39 发布

原创最新推荐文章于 2022-01-02 12:12:39 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

Web 前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现跟随鼠标移动的小图片效果的方法。利用document的onmousemove事件，通过事件参数对象获取鼠标位置，调整img元素的位置，使图片跟随鼠标移动。文中提供了一个兼容不同浏览器的示例代码。

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

可视区域的小图片跟着鼠标移动

文档的鼠标移动事件有：对象、事件，事件处理函数，事件触发了，函数的代码就会执行，执行的时候也就是函数调用的时候

通过argument.length可以得出：事件处理函数中实际上是有一个参数的，这个参数和事件有关系，是一个对象—>事件参数对象（谷歌、火狐中都有e这个事件参数对象，而IE8中没有，IE8中的e用window.event来代替）
例子代码：

     document.onmousemove=function () {
         console.log(arguments.length);
      };

     document.onmousemove=function (e) {
        console.log(arguments[0]);
        console.log(e);
      };

而控制台(谷歌)里面对象里有clientX和clientY属性，可用其对象里的属性来调用可视区域的值，从而达到目的。

兼容代码：（若复制代码注意这里的img图片需要自行更改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            position: absolute;
        }
    </style>
</head>
<body>
<img src="images/angle.gif" alt="" id="im">
<script src="common.js"></script>
<script>

      document.onmousemove = function (e) {
        e = window.event || e;   // 问e有没有window.event，有的话就用window.event，没有的话就用e
        my$("im").style.left = e.clientX + "px";    //可视区域的横坐标
        my$("im").style.top = e.clientY + "px";     //可视区域的纵坐标
      };

</script>
</body>
</html>