Vue模仿实现京东商品大图放大镜效果

更新时间：2022年12月27日 14:33:46 作者：Eric加油学！

这篇文章主要为大家介绍了Vue实现京东网站商品放大镜效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

效果如下：

首先，有一个放大镜的DOM结构

<template>
  <div class="spec-preview">
    <!-- 展示的原图 -->
    <img :src="imgObj.imgUrl" />
    <!-- 绑定触发 -->
    <div class="event"></div>
    <!-- 放大图 -->
    <div class="big">
      <img :src="imgObj.imgUrl" />
    </div>
    <!-- 遮罩层 -->
    <div class="mask"></div>
  </div>
</template>

这里img的src是通过父组件传过来的imgList来展示的，可以换成自己的任意图

交代一下：遮罩层和展示图都是正方形的，而且遮罩层的宽高都是展示图的一半

分别要绑定鼠标移动事件，和获取两个元素节点，分别是遮罩层和放大图

<template>
  <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>
</template>

vue3中如何获得ref绑定的节点元素呢？

首先，要知道在vue2中获取ref节点元素是很简单的，只需要this.$refs.mask即可。但是vue3中是没有this.$refs的。

<script>
import { computed, getCurrentInstance, onMounted, ref } from "vue";
export default {
  name: "ZoomIndex",
  props: ["skuImageList"],
  setup(props) {
    let mask = ref(null);
    let big = ref(null);
    function handler(event) {
     let handlerMask = mask.value;
     let handlerBig = big.value;
    }
    return {
      handler,
      mask,
      big,
    };
  },
};
</script>

为了结构清楚，我把其他不涉及这个案例的代码都删掉了。handlerMask和handlerBig就是我们想要获取的节点。

获取到节点后，就可以写相应的放大器实现代码了

首先要获取event的offserX也就是我们鼠标距离左侧边框的距离，然后还需要减去遮罩层本身宽度的一半，高度同理。并且添加约束条件，让这个遮罩层不能出展示区域。最后就只需要修改相应元素的left和top属性即可了（当然，这里肯定是要用到绝对定位的，子绝父相）

function handler(event) {
      let handlerMask = mask.value;
      let left = event.offsetX - handlerMask.offsetWidth / 2;
      let top = event.offsetY - handlerMask.offsetHeight / 2;
      // 约束范围
      if (left <= 0) left = 0;
      if (left >= handlerMask.offsetWidth) left = handlerMask.offsetWidth;
      if (top <= 0) top = 0;
      if (top >= handlerMask.offsetHeight) top = handlerMask.offsetHeight;
      // 修改元素的left｜top属性值
      handlerMask.style.left = left + "px";
      handlerMask.style.top = top + "px";
      // 修改放大图
      let handlerBig = big.value;
      handlerBig.style.left = -2 * left + "px";
      handlerBig.style.top = -2 * top + "px";
    }

这里稍微有疑惑的可能就是放大图为什么是-2去相乘。首先根据前面的介绍，我们的展示图和放大图的大小是一致的，都是正方形。而遮罩层的宽高都是其一半。所以要把相应的遮罩层的图片放大，就是简单的乘以2即可。那为什么是负数。这就是涉及到放大图的移动方向了。我们遮罩层向左移动，起始放大图是相应的向右移动的。

.event {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
  }
  .mask {
    width: 50%;
    height: 50%;
    background-color: rgba(0, 255, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }
  .big {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 100%;
    border: 1px solid #aaa;
    overflow: hidden;
    z-index: 998;
    display: none;
    background: white;
 }
 img {
      width: 200%;
      max-width: 200%;
      height: 200%;
      position: absolute;
      left: 0;
      top: 0;
    }

根据上面的展示（我把big里面的overflow：hidden去掉后的），可以看到，其实图片的大小的是展示图和放大镜大小的2倍，超出部分是隐藏的。也就是向着相反的方向移动，使得我们遮罩层的区域放大后正好在放大镜的展示区域中。

完整代码如下：

<template>
  <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>
</template>
<script>
import { computed, getCurrentInstance, onMounted, ref } from "vue";
export default {
  name: "ZoomIndex",
  props: ["skuImageList"],
  setup(props) {
    const internalInstance = getCurrentInstance(); //当前组件实例
    const $bus = internalInstance.appContext.config.globalProperties.$bus;
    // console.log(props);
    let currentIndex = ref(0);
    let mask = ref(null);
    let big = ref(null);
    let imgObj = computed({
      get() {
        return props.skuImageList[currentIndex.value] || {};
      },
    });
    function handler(event) {
      let handlerMask = mask.value;
      let left = event.offsetX - handlerMask.offsetWidth / 2;
      let top = event.offsetY - handlerMask.offsetHeight / 2;
      // 约束范围
      if (left <= 0) left = 0;
      if (left >= handlerMask.offsetWidth) left = handlerMask.offsetWidth;
      if (top <= 0) top = 0;
      if (top >= handlerMask.offsetHeight) top = handlerMask.offsetHeight;
      // 修改元素的left｜top属性值
      handlerMask.style.left = left + "px";
      handlerMask.style.top = top + "px";
      // 修改放大图
      let handlerBig = big.value;
      handlerBig.style.left = -2 * left + "px";
      handlerBig.style.top = -2 * top + "px";
    }
    onMounted(() => {
      // 全局事件总线，获取兄弟组件传递过来的索引值
      $bus.on("getIndex", (index) => {
        // 修改当前响应式数据
        currentIndex.value = index.value;
      });
    });
    return {
      currentIndex,
      imgObj,
      handler,
      mask,
      big,
    };
  },
};
</script>
<style lang="less">
.spec-preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  img {
    width: 100%;
    height: 100%;
  }
  .event {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
  }
  .mask {
    width: 50%;
    height: 50%;
    background-color: rgba(0, 255, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }
  .big {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 100%;
    border: 1px solid #aaa;
    // overflow: hidden;
    z-index: 998;
    display: none;
    background: white;
    img {
      width: 200%;
      max-width: 200%;
      height: 200%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .event:hover ~ .mask,
  .event:hover ~ .big {
    display: block;
  }
}
</style>

到此这篇关于Vue模仿实现京东商品大图放大镜效果的文章就介绍到这了,更多相关Vue放大镜效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于vue实现多引擎搜索及关键字提示
这篇文章主要为大家详细介绍了基于vue实现多引擎搜索及关键字提示的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue实现拍照或录像的示例代码
这篇文章主要为大家详细介绍了如何利用vue实现拍照或录像的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以跟随小编一起学习一下
2023-11-11
vue3-treeselect数据绑定失败的解决方案
这篇文章主要介绍了vue3-treeselect数据绑定失败的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
VUE登录注册页面完整代码(直接复制)
这篇文章主要给大家介绍了关于VUE登录注册页面的相关资料,在Vue中可以使用组件来构建登录注册页面,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
vue3简易实现proxy代理实例详解
这篇文章主要为大家详细介绍了Python实现学生成绩管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
vue2 中二级路由高亮问题及配置方法
这篇文章主要介绍了vue2 中二级路由高亮问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
vue配置electron使用electron-builder进行打包的操作方法
这篇文章主要介绍了vue配置electron使用electron-builder进行打包的操作方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-08-08
使用vue自定义如何实现Tree组件和拖拽功能
这篇文章主要介绍了使用vue自定义如何实现Tree组件和拖拽功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue.js动态修改background-image问题
这篇文章主要介绍了vue.js动态修改background-image问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08

Vue模仿实现京东商品大图放大镜效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具