js图片跟随鼠标移动效果

js原生代码

要实现图片跟随鼠标移动的效果，可以使用JavaScript原生的mousemove事件以及CSS的transform属性。

HTML代码：

html 复制代码

<div id="container">
  <img id="image" src="path_to_image.jpg" alt="Image">
</div>

CSS代码：

css 复制代码

#container {
  position: relative;
  width: 400px;
  height: 400px;
}

#image {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease-in-out;
}

JavaScript代码：

javascript 复制代码

var container = document.getElementById('container');
var image = document.getElementById('image');

container.addEventListener('mousemove', function(event) {
  var mouseX = event.clientX - container.offsetLeft;
  var mouseY = event.clientY - container.offsetTop;
  
  var imageX = (mouseX / container.offsetWidth) * 20 - 10;
  var imageY = (mouseY / container.offsetHeight) * 20 - 10;
  
  image.style.transform = 'translate(' + imageX + 'px, ' + imageY + 'px)';
});

在以上代码中，我们监听container元素的mousemove事件。当鼠标在container内移动时，获取鼠标相对container的坐标(mouseX和mouseY)。然后，根据container的宽度和高度计算出图片应该移动的距离(imageX和imageY)。最后，使用CSS的transform属性将图片移动到对应的位置上。

注意修改代码中的图像路径(path_to_image.jpg)以适应你的实际需求。此外，你还可以根据需要调整图片的移动范围和速度，这里使用的是一个简单的线性转换，将鼠标坐标映射到-10到10的范围内。

jquery代码

你可以使用jQuery和CSS来实现图片跟随鼠标移动的效果。下面是一个简单的示例:

HTML:

html 复制代码

<div class="container">
  <img src="your-image-url" alt="Image" class="image">
</div>

CSS:

css 复制代码

.container {
  position: relative;
  width: 500px; /* 容器宽度 */
  height: 300px; /* 容器高度 */
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px; /* 图片宽度 */
  height: 100px; /* 图片高度 */
  transition: transform 0.2s ease-out; /* 过渡效果 */
}

JavaScript:

javascript 复制代码

$(document).mousemove(function(e) {
  var mouseX = e.pageX; // 获取鼠标X坐标
  var mouseY = e.pageY; // 获取鼠标Y坐标
  
  var container = $('.container');
  var containerX = container.offset().left; // 获取容器左边距离文档的距离
  var containerY = container.offset().top; // 获取容器上边距离文档的距离
  
  var image = $('.image');
  var imageX = mouseX - containerX - (image.width() / 2); // 计算图片X坐标
  var imageY = mouseY - containerY - (image.height() / 2); // 计算图片Y坐标
  
  image.css('transform', 'translate(' + imageX + 'px, ' + imageY + 'px)'); // 移动图片
});

此代码会使图片在鼠标移动时跟随移动。你只需要将your-image-url替换为你自己的图片链接，并适当调整容器和图片的宽度、高度，就可以实现你想要的效果。

vue代码实现方式

要实现Vue图片跟随鼠标移动的效果，可以通过以下步骤来实现：

在Vue组件中引入图片：

html 复制代码

<template>
  <div>
    <img src="path_to_image" class="image" ref="image" />
  </div>
</template>

<style>
.image {
  position: absolute; /* 设置图片为绝对定位，以便后续移动 */
}
</style>

在Vue组件的mounted钩子函数中，监听鼠标移动事件，并根据鼠标的坐标来更新图片的位置：

javascript 复制代码

mounted() {
  this.$refs.image.addEventListener('mousemove', this.moveImage);
},

methods: {
  moveImage(event) {
    const image = this.$refs.image;
    const x = event.clientX;
    const y = event.clientY;
    
    // 根据鼠标坐标更新图片位置
    image.style.left = x + 'px';
    image.style.top = y + 'px';
  }
},

beforeDestroy() {
  this.$refs.image.removeEventListener('mousemove', this.moveImage);
}

这样，当鼠标在图片上移动时，图片将会跟随鼠标移动。