在做前台项目的时候经常会遇到放大镜的功能,很简单,一起来看看吧
思路:一个固定盒子套三个盒子与一张图片(一个盒子(写事件)+一个盒子(放大图)+一个盒子(遮层)+图片),然后使用定位布局
------鼠标在原图移动,使大图等比例移动,—即,遮层与大盒子的比例等同遮层与大图片移动比例
效果图:
- 模版区
<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相邻元素(兄弟元素)发生变化
我欲乘风归去,又恐琼楼玉宇,高处不胜寒 — 《水调歌头·明月几时有》–宋代苏轼