快捷導(dǎo)航

vue3實現(xiàn)淘寶放大鏡效果的示例代碼

更新時間：2022年06月06日 11:09:14 作者：Ayanokouji

放大鏡效果在很多購物網(wǎng)站都可以看到，本文主要介紹了vue3實現(xiàn)淘寶放大鏡效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實現(xiàn)效果

實現(xiàn)思路

我們實現(xiàn)動圖的淘寶放大鏡的效果需要4步。

1.完成小圖盒子、遮罩、大圖盒子布局
2.實現(xiàn)鼠標(biāo)移動到小圖盒子顯示遮罩和大圖盒子
3.實現(xiàn)鼠標(biāo)移動遮罩在小圖盒子移動
4.實現(xiàn)遮罩的移動范圍不能超出小圖盒子，且移動時帶動大圖圖片移動

完成小圖盒子、遮罩、大圖盒子布局

我的布局小圖盒子包裹圖片、遮罩、大圖盒子。
小圖盒子為相對定位。遮罩、大圖盒子、大圖圖片都為絕對定位（大圖圖片沒定位不能移動）。mask要設(shè)置透明度。只要能實現(xiàn)效果即可。

實現(xiàn)鼠標(biāo)移動到小圖盒子顯示遮罩和大圖盒子

小圖盒子綁定mouseout鼠標(biāo)移到事件和mouseover鼠標(biāo)移出事件。每次觸發(fā)事件的時候切換狀態(tài)。

實現(xiàn)鼠標(biāo)移動遮罩在小圖盒子移動

小圖盒子綁定mousemove鼠標(biāo)移動事件。鼠標(biāo)在頁面的x坐標(biāo)減去小圖盒子的offersetLeft就是鼠標(biāo)在盒子的左邊這就是遮罩要移動的坐標(biāo)，想要鼠標(biāo)在mask的中間要除以2。同理y坐標(biāo)也是。
實現(xiàn)遮罩的移動范圍不能超出小圖盒子，且移動時帶動大圖圖片移動
邊界值的判斷，如果小于等于0，則將mask的left等于0，x的有邊界值其實就是小盒子的寬度減去mask的寬度的值。同理y軸就是小盒子的高度減去mask的高度。
帶動大圖移動有個比例關(guān)系。大圖片移動距離 = mask的移動距離*大盒子最大移動距離 / mask的x最大移動距離，

完整代碼

<template>
? <div
? ? class="tb-booth"
? ? @mouseover="onMouseOver"
? ? @mouseout="onMouseOut"
? ? @mousemove="onMouseMove"
? ? ref="boothRef"
? >
? ? <img
? ? ? src="https://img.alicdn.com/imgextra/i3/1917047079/O1CN01lkG2pf22AEUi1owve_!!1917047079.png_430x430q90.jpg"
? ? />
? ? <div class="mask" ref="mask" v-show="boxShow" />
? ? <div class="big-img_box" ref="bigImgBox" v-show="boxShow">
? ? ? <img
? ? ? ? class="big-img"
? ? ? ? ref="bigImg"
? ? ? ? src="https://img.alicdn.com/imgextra/i3/1917047079/O1CN01lkG2pf22AEUi1owve_!!1917047079.png"
? ? ? />
? ? </div>
? </div>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
export default {
? setup() {
? ? const boothRef = ref(null);
? ? const mask = ref(null);
? ? const bigImg = ref(null);
? ? const bigImgBox = ref(null);
? ? const state = reactive({
? ? ? boxShow: false
? ? });
? ? const onMouseOver = () => {
? ? ? state.boxShow = true;
? ? };
? ? const onMouseOut = () => {
? ? ? state.boxShow = false;
? ? };

? ? const onMouseMove = (e) => {
? ? ? let x = e.pageX - boothRef.value.offsetLeft;
? ? ? let y = e.pageY - boothRef.value.offsetTop;
? ? ? let maskX = x - mask.value.offsetWidth / 2;
? ? ? let maskY = y - mask.value.offsetHeight / 2;
? ? ? // mask的x最大移動距離
? ? ? let maskXMaxMove = boothRef.value.offsetWidth - mask.value.offsetWidth;
? ? ? let maskYMaxMove = boothRef.value.offsetHeight - mask.value.offsetHeight;
? ? ? let bigImgXMaxMove =
? ? ? ? bigImgBox.value.offsetWidth - bigImg.value.offsetWidth;
? ? ? let bigImgYMaxMove =
? ? ? ? bigImgBox.value.offsetHeight - bigImg.value.offsetHeight;
? ? ? if (maskX <= 0) {
? ? ? ? maskX = 0;
? ? ? } else if (maskX >= maskXMaxMove) {
? ? ? ? maskX = maskXMaxMove;
? ? ? }
? ? ? if (maskY <= 0) {
? ? ? ? maskY = 0;
? ? ? } else if (maskY >= maskYMaxMove) {
? ? ? ? maskY = maskYMaxMove;
? ? ? }
? ? ? mask.value.style.left = maskX + "px";
? ? ? mask.value.style.top = maskY + "px";
? ? ? // 大圖片移動距離 = mask的移動距離*大盒子最大移動距離 / mask的x最大移動距離
? ? ? let bixImgXMove = (maskX * bigImgXMaxMove) / maskXMaxMove;
? ? ? let bixImgYMove = (maskY * bigImgYMaxMove) / maskYMaxMove;
? ? ? bigImg.value.style.left = bixImgXMove + "px";
? ? ? bigImg.value.style.top = bixImgYMove + "px";
? ? };
? ? return {
? ? ? ...toRefs(state),
? ? ? boothRef,
? ? ? mask,
? ? ? bigImg,
? ? ? bigImgBox,
? ? ? onMouseOver,
? ? ? onMouseOut,
? ? ? onMouseMove,
? ? };
? },
};
</script>
<style scoped>
.tb-booth {
? width: 430px;
? height: 430px;
? position: relative;
? border: 1px solid #cccccc;
}
.mask {
? position: absolute;
? top: 0;
? left: 0;
? width: 200px;
? height: 200px;
? background-color: rgb(61, 110, 206);
? opacity: 0.5;
? cursor: move;
}

.big-img_box {
? position: absolute;
? top: 0;
? left: 530px;
? width: 500px;
? height: 500px;
? background-color: #fff;
? border: 1px solid #cccccc;
? overflow: hidden;
}
.big-img {
? position: absolute;
? left: 0;
? top: 0;
}
</style>

總結(jié)

mouseover、mouseout、mousemove事件的運用
v-show顯示隱藏
vue3獲取ref兩種方式其中一種通過setup創(chuàng)建ref響應(yīng)式數(shù)據(jù)，暴露出去賦予ref元素的值。第二種是getCurrentInstance方法。
offsetWidth、offsetHeight、offsetLeft、offsetTop、pageX、pageY的概念

到此這篇關(guān)于vue3實現(xiàn)淘寶放大鏡效果的示例代碼的文章就介紹到這了,更多相關(guān)vue3 淘寶放大鏡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: