Javascript Vue.js-在光标水平移动时设置图像动画

我有很多图像（大约31个），目标是让页面加载显示图像1，然后当光标水平运行时，我们根据光标位置在图像中设置动画

到目前为止，我已经设置了以下方法

handleMouseMove(evt) {
  var e = evt || window.event;
  var x = e.offsetX;
  this.width = this.$refs.barrelapp.clientWidth;
  this.divisions = this.width / 31;
  this.position = x;
}

我要在图像元素上的mousemove上启动这个。。。它激发并正确地给出元素的宽度、激发每个图像src的像素量以及当前鼠标位置

有谁能解释一下我是如何索引这张图片的，并浏览一组31张图片，或者类似的东西吗

例如，如果我的back宽度为1280，divisions为41.290322580645，我希望它每41.290etc像素触发一次图像更改

我是Vue的新手！所以，如果我错过了一些非常明显的东西，请原谅

理想情况下，我希望这是从左到右，反之亦然

---

谢谢各位。

你们可以这样做

导出默认值{
数据（）{
返回{
图像索引：0
图像：[
//图像
]
}
},
计算：{
图像（）{
返回此。图像[imageIndex]
//或者如果您使用的是bg图像样式
返回{
'背景图像'：`url（${this.images[imageIndex]}）`
}
}
},
方法：{
手动移动（evt）{
常数e=evt | | window.event；
常数x=e.offsetX；
常量宽度=此。$refs.barrelapp.clientWidth；
const divisions=宽度/this.images.length；
this.imageIndex=数学楼层（x/分区）；
}
},
}

---

这假设您在数据对象中将图像作为字符串数组。然后，您可以使用计算出的调用图像来显示相关图像

您可以这样做

导出默认值{
数据（）{
返回{
图像索引：0
图像：[
//图像
]
}
},
计算：{
图像（）{
返回此。图像[imageIndex]
//或者如果您使用的是bg图像样式
返回{
'背景图像'：`url（${this.images[imageIndex]}）`
}
}
},
方法：{
手动移动（evt）{
常数e=evt | | window.event；
常数x=e.offsetX；
常量宽度=此。$refs.barrelapp.clientWidth；
const divisions=宽度/this.images.length；
this.imageIndex=数学楼层（x/分区）；
}
},
}

---

这假设您在数据对象中将图像作为字符串数组。然后，您可以使用计算出的调用图像显示相关图像

太棒了，非常感谢！太棒了，非常感谢你！