前言
给大家带来一种潮流的方式,实现放大镜效果,安排🤩
准备工作
下包:
yarn add @vueuse/core或
npm i @vueuse/core或
复制代码
放大镜基本的结构
<script lang="ts" setup">
import { ref } from 'vue';
const target = ref(null)
const images = ref('https://images.mepai.me/app/works/178221/2022-07-14/w_62d01aa163e45/062d01aa163f41.jpg!1200w.jpg')
const active = ref(0)
</script>
<template>
<div class="goods-image">
<!-- 显示在右侧的放大之后的区域 -->
<div class="large"
v-show="true"
:style="[{backgroundImage:'url('+images+')'}]"></div>
<div class="middle" ref="target">
<img :src="images" alt="" />
<!-- 移动遮罩 -->
<div class="layer" ref="target" v-show="true "></div>
</div>
</div>
</template>
<style scoped lang="less">
.goods-image {
width: 480px;
height: 400px;
position: relative;
display: flex;
z-index: 500;
.large {
position: absolute;
top: 0;
left: 412px;
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;
img{
width: 400px;
height: 400px;
}
.layer {
width: 200px;
height: 200px;
background: rgba(0,0,0,.2);
left: 0;
top: 0;
// 可以移动
position: absolute;
}
}
.small {
width: 80px;
li {
width: 68px;
height: 68px;
margin-left: 12px;
margin-bottom: 15px;
cursor: pointer;
&:hover,
&.active {
border: 2px solid red;
}
}
}
}
</style>
复制代码
![8aeb608cc25494404748e4e8a2b6d05f.jpeg](https://i-blog.csdnimg.cn/blog_migrate/391f1b9360c0884c8b7e8726593148a8.jpeg)
功能实现
使用@vueuse/core里面的useMouseInElement方法
更多请前往vueuse官网了解>[1]
![d966e0d387a15019463c7686ee0ff8d7.jpeg](https://i-blog.csdnimg.cn/blog_migrate/f71eff91522f9bce402938938d9e108c.jpeg)
<script lang="ts" setup name="GoodsImage">import { ref } from 'vue';
import {useMouseInElement} from '@vueuse/core'
const target = ref(null)
// isOutside是否进入指定区域 进入为false 否则为true
// elementX 鼠标X位置
// elementY 鼠标Y位置
const {isOutside,elementX,elementY} = useMouseInElement(target) // useMouseInElement(指定的区域)鼠标进入的位置
const images = ref('https://images.mepai.me/app/works/178221/2022-07-14/w_62d01aa163e45/062d01aa163f41.jpg!1200w.jpg')
</script>
<template>
{{isOutside}}
X: {{elementX}}
Y: {{elementY}}
<div class="goods-image">
<!-- 显示在右侧的放大之后的区域 -->
<div class="large"
v-show="!isOutside"
:style="[{backgroundImage:'url('+images+')'}]"></div>
<div class="middle" ref="target">
<img :src="images" alt="" />
<!-- 移动遮罩 -->
<div class="layer" ref="target" v-show="!isOutside "></div>
</div>
</div>
</template>
复制代码
看看效果使用useMouseInElement方法的效果是不是很奈斯😊😊😊 精彩还在后面⬇️⬇️⬇️
`` 移动遮罩
import {useMouseInElement} from '@vueuse/core'
import { computed } from '@vue/reactivity';
const {isOutside,elementX,elementY} = useMouseInElement(target)
const position = computed(()=>{
let x = elementX.value -100 // -100 让光标处再中间
let y = elementY.value -100
// 边界处理
x = x<0 ? 0 : x
y = y<0 ? 0 : y
x = x>200 ? 200 : x
y = y>200 ? 200 : y
return {
x,
y
}
})
<!-- 移动遮罩 -->
<div class="layer" ref="target" v-show="!isOutside "
:style="{ left:position.x+'px', top: position.y+'px' }"></div>
复制代码
看看效果吧 最后一步来啦⬇️⬇️⬇️
![d6a3b31b5033fccb90edf037b906b60d.jpeg](https://i-blog.csdnimg.cn/blog_migrate/55e7c321ded7c502c6ded660429036a2.jpeg)
移动遮罩大图跟着移动
<!-- 显示在右侧的放大之后的区域 -->
<div class="large"
v-show="!isOutside"
:style="[{backgroundImage:'url('+images+')', backgroundPosition: `-${position.x*2}px -${position.y*2}px`}]"></div>
复制代码
瞧瞧完成效果👍👍👍
![8ba9c5597943da7f40087699098edf2d.jpeg](https://i-blog.csdnimg.cn/blog_migrate/e01beecf3a25405577070ea0d9468d54.jpeg)
完整实现代码
<script lang="ts" setup name="GoodsImage">import { ref } from 'vue';
import {useMouseInElement} from '@vueuse/core'
import { computed } from '@vue/reactivity';
const target = ref(null)
// isOutside是否进入指定区域 进入为false 否则为true
// elementX 鼠标X位置
// elementY 鼠标Y位置
const {isOutside,elementX,elementY} = useMouseInElement(target) // useMouseInElement(指定的区域)鼠标进入的位置
const active = ref(0)
const images = ref('https://images.mepai.me/app/works/178221/2022-07-14/w_62d01aa163e45/062d01aa163f41.jpg!1200w.jpg')
const position = computed(()=>{
let x = elementX.value -100
let y = elementY.value -100
x = x<0 ? 0 : x
y = y<0 ? 0 : y
x = x>200 ? 200 : x
y = y>200 ? 200 : y
return {
x,
y
}
})
</script>
<template>
<!-- {{isOutside}}
X: {{elementX}}
Y: {{elementY}} -->
<div class="goods-image">
<!-- 显示在右侧的放大之后的区域 -->
<div class="large"
v-show="!isOutside"
:style="[{backgroundImage:'url('+images+')', backgroundPosition: `-${position.x*2}px -${position.y*2}px`}]"></div>
<div class="middle" ref="target">
<img :src="images" alt="" />
<!-- 移动遮罩 -->
<div class="layer" ref="target" v-show="!isOutside " :style="{ left:position.x+'px', top: position.y+'px' }"></div>
</div>
</div>
</template>
<style scoped lang="less">
.goods-image {
width: 480px;
height: 400px;
position: relative;
display: flex;
z-index: 500;
.large {
position: absolute;
top: 0;
left: 412px;
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;
img{
width: 400px;
height: 400px;
}
.layer {
width: 200px;
height: 200px;
background: rgba(0,0,0,.2);
left: 0;
top: 0;
// 可以移动
position: absolute;
}
}
.small {
width: 80px;
li {
width: 68px;
height: 68px;
margin-left: 12px;
margin-bottom: 15px;
cursor: pointer;
&:hover,
&.active {
border: 2px solid red;
}
}
}
}
</style>
复制代码
结束语
感谢阅读^_^ 不足地方请大家指点指点😊😊😊
关于本文
作者:SW_Yang
https://juejin.cn/post/7123196609638498340
最后
欢迎关注「前端达人」