手写Vue 放大镜

在做前台项目的时候经常会遇到放大镜的功能,很简单,一起来看看吧

思路:一个固定盒子套三个盒子与一张图片(一个盒子(写事件)+一个盒子(放大图)+一个盒子(遮层)+图片),然后使用定位布局
------鼠标在原图移动,使大图等比例移动,—即,遮层与大盒子的比例等同遮层与大图片移动比例
效果图:

• 模版区

<template>
   <div class="container">
      <img src="./fj1.jpg" alt="" />
      <div class="event" @mousemove="moveHandel"></div>
      <div class="big">
        <img src="./fj1.jpg" alt="" ref="big" />
      </div>
      <div class="mask" ref="mask"></div>
    </div>
</template>

• 脚本区

<script>
export default {
  name: '',
  methods: {
    moveHandel(event) {
      const mask = this.$refs.mask
      const 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
      mask.style.left = left + 'px'
      mask.style.top = top + 'px' 
      //大图移动距离/遮层移动距离<==>大图最大移动距离/遮层最大移动距离  --->    (.big长或宽/.mask长或宽--)
      // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
      big.style.left = -2 * left + 'px'
      big.style.top = -2 * top + 'px'
    }
  }
}
</script>

• 样式区

<style lang="less" scoped>
.container {
  margin: 200px auto;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .event {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .big {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    border: 1px solid #ccc;
    display: none;
    overflow: hidden;
    z-index: 999;

    img {
      width: 200%;
      height: 200%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .mask {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: gray;
    opacity: 0.3;
    display: none;
  }
  .event:hover ~ .mask,
  .event:hover ~ .big {
    display: block;
  }
}
</style>

总结:

1.大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
2.hover的不同用法:
x:hover 自身发生变化
x:hover 元素 { }子元素发生变化
x:hover + 元素{ } x相邻元素(亲兄弟元素)发生变化
x:hover ~ 元素{ } x相邻元素(兄弟元素)发生变化

我欲乘风归去，又恐琼楼玉宇，高处不胜寒 — 《水调歌头·明月几时有》–宋代苏轼