js图片跟随鼠标移动效果

js原生代码


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

HTML代码:

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

CSS代码:

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

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

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:

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

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:

$(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图片跟随鼠标移动的效果,可以通过以下步骤来实现:

  1. 在Vue组件中引入图片:
<template>
  <div>
    <img src="path_to_image" class="image" ref="image" />
  </div>
</template>

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

  1. 在Vue组件的mounted钩子函数中,监听鼠标移动事件,并根据鼠标的坐标来更新图片的位置:
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);
}

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ordinary90

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值