前端实现放大镜效果【原生js实现、vue实现】

编程入门行业动态更新时间:2024-10-22 18:29:10

前端实现<a href=https://www.elefans.com/category/jswz/34/1766793.html style= 放大镜效果【原生js实现、vue实现】"/>

前端实现放大镜效果【原生js实现、vue实现】

🚀作者简介

主页：水香木鱼的博客

专栏：后台管理系统

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

📒技术聊斋

（一）原生js实现

具体操作步骤在在注释区域，详细请看如下代码：👇

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">* {margin: 0;padding: 0;}/* 原图 */.masterMap {width: 300px;height: 300px;float: left;margin-top: 100px;margin-left: 100px;position: relative;cursor: move;}img {width: 100%;height: 100%;}/* 放大图 */.enlargedView {width: 300px;height: 300px;float: left;margin-top: 100px;display: none;overflow: hidden;position: relative;}/* 放大图 */.enlargedView img {width: 200%;height: 200%;position: absolute;}/* 放大镜 */.magnifyingGlass {width: 100px;height: 100px;opacity: 0.5;background: red;position: absolute;left: 0;top: 0;display: none;}.m {display: block;}</style></head><body><!-- 原图 --><div class="masterMap"><imgsrc="=3892561140,1187896302&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=484"/><!--放大镜--><div class="magnifyingGlass"></div></div><!-- 放大图 --><div class="enlargedView"><imgsrc="=3892561140,1187896302&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=484"/></div></body><script type="text/javascript">var masterMap = document.getElementsByClassName("masterMap")[0]; //原图var enlargedView = document.getElementsByClassName("enlargedView")[0]; //放大图var magnifyingGlass = document.getElementsByClassName("magnifyingGlass")[0]; //放大镜var img = document.getElementsByTagName("img")[1];/*鼠标悬停*/masterMap.onmouseenter = function () {magnifyingGlass.className = "magnifyingGlass m";enlargedView.className = "enlargedView m";};/*鼠标离开*/masterMap.onmouseleave = function () {magnifyingGlass.className = "magnifyingGlass";enlargedView.className = "enlargedView";};/*鼠标移动 监听鼠标位置*/masterMap.onmousemove = function (event) {var event = event || window.event;x = event.pageX - masterMap.offsetLeft - magnifyingGlass.offsetWidth / 2;y = event.pageY - masterMap.offsetTop - magnifyingGlass.offsetHeight / 2;if (x < 0) {x = 0;}if (y < 0) {y = 0;}if (x > this.offsetWidth - magnifyingGlass.offsetWidth) {x = this.offsetWidth - magnifyingGlass.offsetWidth;}if (y > this.offsetHeight - magnifyingGlass.offsetHeight) {y = this.offsetHeight - magnifyingGlass.offsetHeight;}magnifyingGlass.style.left = x + "px";magnifyingGlass.style.top = y + "px";img.style.left = -x * 2 + "px";img.style.top = -y * 2 + "px";};</script>
</html>

（二）`vueuse/core`放大镜插件【vue】

使用vue3当中的useMouseInElement 实现

Ⅰ、安装vueuse/core插件

npm install @vueuse/core@5.3.0

Ⅱ、封装公共组件

<!--MagnifyingGlass.vue-->
<template><div class="goods-image"><!-- 预览大图 --><divclass="large":style="[{ backgroundImage: `url(${images[currIndex]})` }, bgPosition]"v-show="isShow"></div><div class="middle" ref="target"><!-- 左侧的大图 --><img :src="images[currIndex]" alt="" /><!-- 遮罩层 --><div class="layer" :style="[position]" v-show="isShow"></div></div><ul class="small"><!-- 右侧的缩略图 --><liv-for="(img, i) in images":key="img":class="{ active: i === currIndex }"><img @mouseenter="currIndex = i" :src="img" alt="" /></li></ul></div>
</template>
<script>
import { ref, watch, reactive } from "vue";
import { useMouseInElement } from "@vueuse/core";export default {name: "magnifyingGlass",props: {images: {type: Array,default: () => [],},},setup(props) {const currIndex = ref(0);const target = ref(null);const isShow = ref(false);// 遮罩层的坐标const position = reactive({left: 0,top: 0,});// 控制背景图的位置const bgPosition = reactive({backgroundPositionX: 0,backgroundPositionY: 0,});const { elementX, elementY, isOutside } = useMouseInElement(target);// 侦听鼠标移动后信息watch([elementX, elementY, isOutside], () => {// 每次有值发生变化，就读取新的数据即可isShow.value = !isOutside.value;// 鼠标在图片的区域之外，不需要计算坐标if (isOutside.value) return;// 水平方向if (elementX.value < 100) {// 左边界position.left = 0;} else if (elementX.value > 300) {// 右边界position.left = 200;} else {// 中间的状态position.left = elementX.value - 100;}// 垂直方向if (elementY.value < 100) {// 上边界position.top = 0;} else if (elementY.value > 300) {// 下边界position.top = 200;} else {// 中间的状态position.top = elementY.value - 100;}// console.log(elementX.value, elementY.value, isOutside.value)// 计算预览大图背景的位置bgPosition.backgroundPositionX = -position.left * 2 + "px";bgPosition.backgroundPositionY = -position.top * 2 + "px";// 计算左侧遮罩层位置position.left += "px";position.top += "px";});return { currIndex, target, isShow, position, bgPosition };},
};
</script>
<style scoped lang="less">
.goods-image {box-sizing: border-box;width: 480px;height: 400px;position: relative;display: flex;z-index: 500;img {width: 100%;height: 100%;}.large {position: absolute;top: 0;left: 410px;width: 400px;height: 400px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);background-repeat: no-repeat;background-size: 800px 800px;background-color: #f8f8f8;}.middle {width: 400px;height: 400px;background: #f5f5f5;position: relative;cursor: move;.layer {width: 200px;height: 200px;background: rgba(0, 0, 0, 0.2);left: 0;top: 0;position: absolute;}}.small {margin: 0;padding: 0;width: 80px;li {width: 68px;height: 68px;margin: 10px;list-style: none;cursor: pointer;&:hover,&.active {border: 2px solid #27ba9b;}}}
}
</style>

Ⅲ、单页面使用

通过引入import MagnifyingGlass from "../components/magnifyingGlass.vue";//放大镜组件 , components注册实现组件使用

<template><div><MagnifyingGlass :images="images" /></div>
</template>

<script>
import MagnifyingGlass from "../components/magnifyingGlass.vue";//放大镜组件
export default {components: {MagnifyingGlass,},data() {return {//图片数据images: [".jpg!1",".png",".png",".png",".png",],};},
};
</script>