VUE放大镜组件
<!--放大镜组件-->
<template>
<div class="zoom l">
<div class="zoom_top">
<img
:src="require(`@/assets/img/productDetail/${currentActive}.jpg`)"
alt=""
style="width: 100%"
/>
<div class="mask" v-show="maskShow" :style="topStyle"></div>
<div
class="maskTop"
@mouseover="bigShow()"
@mouseout="bigLeave()"
@mousemove="move($event)"
></div>
<div class="big" v-show="isShow">
<img
:src="require(`@/assets/img/productDetail/${currentActive}.jpg`)"
alt=""
style="width: 165%"
:style="r_img"
/>
</div>
</div>
<div class="zoom_bottom">
<div v-for="(item, index) in imgSS" :key="index">
<img
:class="{ Active: index == currentActive }"
:src="require(`@/assets/img/productDetail/${index}.jpg`)"
alt=""
style="width: 100%"
@mouseenter="pdEnter(index)"
/>
</div>
</div>
</div>
</template>
<script>
export default {
name: "zoom",
data() {
return {
text0: [0, 1, 1, 11, ,], //用于测试
text: [1, 1, 1, 1, 1, 1], //用于测试
imgSS: [
0,
1,
2,
3,
4, //用于测试
],
currentActive: 0,
r_img: {},
isShow: 0,
maskShow: 0,
topStyle: {},
// currentX: 0,
// currentY: 0,
};
},
methods: {
//鼠标经过图片，显示详细图片以及小图片出现边框
pdEnter(index) {
this.currentActive = index;
},
bigShow() {
this.isShow = !this.isShow;
this.maskShow = !this.maskShow;
},
bigLeave() {
this.isShow = !this.isShow;
this.maskShow = !this.maskShow;
},
move($event) {
let x = event.offsetX;
let y = event.offsetY;
let topX = x - 100 < 0 ? 0 : x - 100;
let topY = y - 100 < 0 ? 0 : y - 100;
if (topX > 200) {
topX = 200;
}
if (topY > 200) {
topY = 200;
}
// this.currentX = X;
// this.currentY = Y;
// console.log(this.currentX);
this.topStyle.transform = `translate(${topX}px,${topY}px)`;
this.r_img.transform = `translate(-${(518 / 380) * topX}px,-${
(500 / 380) * topY
}px)`;
},
},
};
</script>
<style>
/* 放大镜效果 */
/* 一个全部的遮罩层，此处用于（冒泡作用）？？待懂 */
.maskTop {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
cursor: move;
}
/* 黄色遮罩 */
.mask {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
background-color: yellow;
border: 1px solid #ccc;
/* 半透明 */
opacity: 0.5;
}
/* 放大的图片 */
.big {
position: absolute;
left: 100%;
top: 0;
z-index: 2;
width: 132%;
height: 132%;
background-color: #fff;
overflow: hidden;
}
.zoom {
width: 100%;
height: 100%;
}
.zoom_top {
position: relative;
width: 100%;
height: 74%;
}
.zoom_bottom {
display: flex;
justify-content: space-between;
margin-top: 15px;
height: 12%;
}
.zoom_bottom div {
width: 16.5%;
height: 12%;
}
.zoom_bottom img {
width: 16.5%;
}
/* 动态选择图片 */
.Active {
border: 1px solid rgb(239, 31, 31);
}
</style>
