商品詳情頁中圖片移入放大效果
沒有啥太炫酷的東西,僅爲參考
最近在重構電商網站,本想隨便找個現成的插件,網上看了很多發現不是太炫酷,就是不符合需求,emmmmm…
索性就參考別人的自己封裝了個放大鏡的組件,真香啊…
你可以不會寫,但一定得會copy,不廢話了,上代碼~~~~
我們先給組件起個名,我先來,emmmmm…就叫PicZoom吧,你們隨意~~
1.html部分
<template>
<div class="pic-zoom">
<div
class="preview-box"
@mousemove="move($event)"
@mouseleave="out"
ref="previewBox"
@mouseenter="enter"
>
<img :src="previewImg" style="width:350px">
<div class="mask" ref="hoverBox" v-show="maskShow"></div>
</div>
<div class="zoom-box" v-show="zoomVisiable" ref="zoomBox">
<img :src="zoomImg" ref="bigImg">
</div>
</div>
</template>
2.js部分
<script>
function offset (el) {
let top = el.offsetTop;
let left = el.offsetLeft;
if (el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
};
return {
left: left,
top: top
};
}
export default {
name: 'picZoom',
props: {
previewImg: {
type: String,
default: ''
},
zoomImg: {
type: String,
default: ''
}
},
data () {
return {
zoomVisiable: false,
maskShow: false
};
},
methods: {
enter () {
this.maskShow = true;
},
out () {
this.zoomVisiable = false;
this.maskShow = false;
},
move (ev) {
this.init();
// 鼠標距離屏幕距離
let moveX = ev.clientX;
let moveY = ev.clientY;
// 大盒子距離頂部的距離
let offsetLeft = offset(this.oPreviewBox).left;
let offsetTop = offset(this.oPreviewBox).top;
let left = moveX - offsetLeft - this.houverWidth / 2;
let top;
if (this.scroll > 0) {
top = moveY - offsetTop + this.scroll - this.houverHeight / 2;
} else {
top = moveY - offsetTop - this.houverHeight / 2;
}
let maxWidth = this.pWidth - this.houverWidth;
let maxHeight = this.pWidth - this.houverHeight;
left = left < 0 ? 0 : left > maxWidth ? maxWidth : left;
top = top < 0 ? 0 : top > maxHeight ? maxHeight : top;
let percentX = left / (maxWidth);
let percentY = top / (maxHeight);
this.oHoverBox.style.left = left + 'px';
this.oHoverBox.style.top = top + 'px';
this.oBigImg.style.left = percentX * (this.bWidth - this.imgWidth) + 'px';
this.oBigImg.style.top = percentY * (this.bHeight - this.imgHeight) + 'px';
this.$emit('move', ev);
this.zoomVisiable = true;
},
init () {
this.oHoverBox = this.$refs.hoverBox;
this.oPreviewBox = this.$refs.previewBox;
this.oBigImg = this.$refs.bigImg;
this.imgBox = this.$refs.zoomBox;
this.houverWidth = this.oHoverBox.offsetWidth;
this.houverHeight = this.oHoverBox.offsetHeight;
this.pWidth = this.oPreviewBox.offsetWidth;
this.pHeight = this.oPreviewBox.offsetHeight;
this.imgWidth = this.oBigImg.offsetWidth;
this.imgHeight = this.oBigImg.offsetHeight;
this.bWidth = this.imgBox.offsetWidth;
this.bHeight = this.imgBox.offsetHeight;
this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
}
}
};
</script>
3.樣式部分
<style lang="scss" scoped>
.pic-zoom {
.preview-box {
width: 350px;
height: 350px;
border: 1px solid #dddddd;
position: relative;
cursor: crosshair;
.mask{
top: 75px;
left: 75px;
width: 200px;
height: 200px;
position: absolute;
background-color: #FFF;
opacity: .6;
border: 1px solid #CCC;
cursor: crosshair;
z-index: 101;
}
}
.zoom-box {
top: 0px;
left: 365px;
width: 450px;
height: 400px;
border: 1px solid #999;
position: absolute;
overflow: hidden;
z-index: 100;
background: #FFF;
img {
// width: 500px;
// height: 500px;
position: absolute;
border: 0px;
display: block;
left: -100.286px;
top: -125.357px;
}
}
}
</style>
好,組件已經完成了,現在我們把組件引入到需要放大鏡的頁面就ok啦
4.使用
<template>
<div>
<pic-zoom :previewImg="smallImg" :zoomImg="bigImg"></pic-zoom>
</div>
</template>
<script>
import PicZoom from "./components/PicZoom.vue";
export default {
components: {
PicZoom
}
data() {
return {
data: {
smallImg: '../../static/image/small.jpg',
bigImg: '../../static/image/big.jpg'
}
};
}
}
</script>
5效果
截圖鼠標截不到,鼠標是一個 + 號形狀,自己腦補吧