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

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

<style>
.image {
  position: absolute; /* 设置图片为绝对定位,以便后续移动 */
}
</style>
  1. 在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);
}

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

相关推荐
勤奋的知更鸟3 分钟前
Java 编程之模板方法模式
java·开发语言·模板方法模式
前端小巷子5 分钟前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
-凌凌漆-2 小时前
【Qt】QStringLiteral 介绍
开发语言·qt
程序员爱钓鱼2 小时前
Go语言项目工程化 — 常见开发工具与 CI/CD 支持
开发语言·后端·golang·gin
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
军训猫猫头2 小时前
1.如何对多个控件进行高效的绑定 C#例子 WPF例子
开发语言·算法·c#·.net
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js