Question

我有很多图像（大约31张），目标是让页面加载显示的图像1，然后当光标水平运行时，我们根据光标位置对图像进行动画处理。

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

from pyspark.sql.functions import desc, row_number, monotonically_increasing_id

df_with_seq_id = df.withColumn('index_column_name', row_number().over(Window.orderBy(monotonically_increasing_id())) - 1)

我要在将鼠标移动到图像元素上时触发该操作...该操作会正确触发元素的宽度，我们应触发每个图像src的像素数量以及当前鼠标位置。

有人可以阐明我如何对此进行索引，然后遍历31张图像的阵列，或沿这些直线排列的图像吗？

例如，如果我的宽度为1280，除法为41.290322580645，我希望它在每41.290等像素上触发一次图像更改。

我对Vue很陌生！所以，如果我错过了一些明显的事情，请原谅！

理想情况下，我希望它从左到右工作，反之亦然！

谢谢大家。

Answer 1

您可以做这样的事情...

<script>
export default {
  data() {
    return {
      imageIndex: 0
      images: [
        // images
      ]
    }
  },
  computed: {
    image() {
      return this.images[imageIndex]
      // or if you're using bg image style
      return {
        'background-image': `url(${this.images[imageIndex]})`
      }
    }
  },
  methods: {
    handleMouseMove(evt) {
      const e = evt || window.event;
      const x = e.offsetX;
      const width = this.$refs.barrelapp.clientWidth;
      const divisions = width / this.images.length;
      this.imageIndex = Math.floor(x / divisions);
    }
  },
}
</script>

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

Vue.js-在光标水平移动时对图像进行动画处理

1 个答案: