js实现图片跟随鼠标移动的两种方法

介绍

本文将重点介绍js如何实现图片跟随鼠标移动的两种方法。这两种方法都是使用js DOM来实现的，其中一种方法使用了鼠标事件，另一种方法则使用了鼠标坐标的位置获取。在实践中，很多网页都会使用图片跟随鼠标移动的效果，这种效果可以为网页增加一些趣味性。

方法一：使用鼠标事件

步骤1：创建图片元素

首先我们需要在HTML文档中创建图片元素，并为其设置CSS样式，以便进行js操作。接下来，我们需要为图片元素设置鼠标事件，以便图片能够随着鼠标移动而移动。这里我们使用onmousemove事件来控制图片的位置。

//创建图片元素
<img src="example.jpg" id="image" style="position:absolute; top:0px; left:0px;">

步骤2：实现鼠标事件

在js文件中，我们需要实现鼠标事件，以便让图片实现跟随鼠标的效果。这里我们使用鼠标移动事件onmousemove来控制图片的位置。具体做法是获取鼠标相对于文档左边缘和上边缘的坐标，然后根据这些坐标来设置图片的left和top样式。

//获取图片对象
var image = document.getElementById('image');
//添加鼠标移动事件
document.onmousemove = function(event) {
    //获取鼠标相对于文档的位置
    var x = event.clientX;
    var y = event.clientY;
    //设置图片的left和top样式
    image.style.left = (x + 10) + 'px';
    image.style.top = (y + 10) + 'px';
};

方法二：使用鼠标坐标的位置获取

步骤1：创建图片元素

同第一种方法一样，我们需要在HTML文档中创建图片元素，并为其设置CSS样式，以便进行js操作。

//创建图片元素
<img src="example.jpg" id="image" style="position:absolute; top:0px; left:0px;">

步骤2：获取鼠标位置

在js文件中，我们使用鼠标事件来实现鼠标位置的获取。具体做法是在鼠标移动事件中获取鼠标相对于当前元素的偏移量，然后根据这些偏移量来计算出鼠标的绝对坐标位置。

//获取图片对象
var image = document.getElementById('image');
//添加鼠标移动事件
image.onmousemove = function(event) {
    //获取相对于元素的偏移量
    var x = event.offsetX;
    var y = event.offsetY;
    //计算出鼠标的绝对位置
    var absX = event.clientX - x;
    var absY = event.clientY - y;
    //设置图片的left和top样式
    image.style.left = (absX + 10) + 'px';
    image.style.top = (absY + 10) + 'px';
};

总结

本文中，我们介绍了两种使用js实现图片跟随鼠标移动的方法。这两种方法都是使用js DOM操作，其中一种方法使用了鼠标事件，另一种方法则使用了鼠标坐标的位置获取。这个效果可以为网页增加一些趣味性，但要注意不要过度使用，以免影响用户的使用体验。