Vue产品放大镜效果实现

原创已于 2023-03-25 10:28:47 修改 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端 #vue

于 2023-03-20 14:26:03 首次发布

本文介绍了如何在Vue项目中利用CSS和CSS3创建产品详细页面的放大镜效果，通过实时预览和交互提升用户体验。内容包括Vue组件的构建、CSS样式设计以及放大镜效果的动态实现。

<div class="spec-preview">
    <img :src="imgObj.imgUrl"/>
    <div class="event" @mousemove="handler"></div>
    <div class="big">
      <img :src="imgObj.imgUrl" ref="big"/>
    </div>
    <div class="mask" ref="mask"></div>
  </div>

handler(event) {
      let mask = this.$refs.mask;
      let big = this.$refs.big;
      let left = event.offsetX - mask.offsetWidth / 2;
      let top = event.offsetY - mask.offsetHeight / 2;
      // 添加约束范围
      if (left <= 0) left = 0;
      if (left >= mask.offsetWidth) left = mask.offsetWidth;
      if (top < 0) top = 0;
      if (top >= mask.offsetHeight) top = mask.offsetHeight;
      // 修改元素的left/top属性值
      mask.style.left = left + 'px';
      mask.style.top = top + 'px';
      big.style.left = -2 * left + 'px';
      big.style.top = -2 * top + 'px';

    }