Vue3.0 自己實(shí)現(xiàn)放大鏡效果案例講解
需要實(shí)現(xiàn)的效果是: 固定放大兩倍,鼠標(biāo)進(jìn)入到左側(cè)圖片區(qū)域的時(shí)候,遮罩層顯示,離開(kāi)時(shí),遮罩層隱藏。
css中的cursor
https://www.runoob.com/cssref/pr-class-cursor.html
鼠標(biāo)跟隨效果如何實(shí)現(xiàn): (子絕父相)絕對(duì)定位 + 修改top,left控制移動(dòng)
在@vueuse中,有一個(gè)工具方法:useMouseInElement
<template> <div ref="target"> <h1>Hello world</h1> </div> </template> <script> import { ref } from 'vue' import { useMouseInElement } from '@vueuse/core' export default { setup() { const target = ref(null) const { x, y, isOutside } = useMouseInElement(target) return { x, y, isOutside } } } </script>
這是VueUse 官網(wǎng)上的用法,最后,別忘了return { target } 我一開(kāi)始沒(méi)return target,x,y,isOutside的值是 0,0,false,并不是變化的值。
鼠標(biāo)的位置和遮罩的位置之間的關(guān)系:
<div class="layer" :style="layerStyle"></div> //這是遮罩層 setup(){ //下面是實(shí)現(xiàn)鼠標(biāo)跟隨的代碼 const layerStyle = reactive({ top: '0px', left: '0px' }) // 監(jiān)聽(tīng)三個(gè)值的變化,watch第一個(gè)參數(shù)用數(shù)組 watch([elementX, elementY, isOutside], () => { // layerStyle.left = elementX.value / 2 + 'px' // layerStyle.top = elementY.value / 2 + 'px' let top = elementY.value - 100 let left = elementX.value - 100 // 給遮罩元素賦值位置 if (top < 0) top = 0 if (top > 200) top = 200 if (left < 0) left = 0 if (left > 200) left = 200 layerStyle.top = top + 'px' layerStyle.left = left + 'px' }) return { elementX, elementY, isOutside, target, layerStyle } }
遮罩區(qū)域不能超出左側(cè)的父盒子,上面有兩行是我注釋掉的代碼,為什么合起來(lái)寫不行呢,因?yàn)楹竺嫖倚枰优袛鄷r(shí),會(huì)發(fā)現(xiàn)判斷完之后 加px的時(shí)候,你會(huì)發(fā)現(xiàn)無(wú)從下手,上面這種分開(kāi)寫的話,top,left 只是一個(gè)數(shù)值,等計(jì)算完成后,再加單位。
放大效果如何實(shí)現(xiàn):
css 樣式里面有個(gè) background-size屬性,第一個(gè)參數(shù)指寬度,第二個(gè)參數(shù)指高度,可以放大圖片
本身是 400 *400,那放大兩倍就是 800*800
css 樣式里面的 background-position-x, background-position-y 可以放大指定區(qū)域
關(guān)于background-position: x,y 第一個(gè)值是水平位置,第二個(gè)值是垂直位置
這是右側(cè)具有放大效果的div:
<div class="large" :style="{ backgroundImage:`url(${images[current]})`,...largeStyle }"></div>
這是css代碼,可以參考一下:
.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; }
最后: 當(dāng)鼠標(biāo)移出左側(cè)盒子區(qū)域,遮罩隱藏,右側(cè)放大的盒子也隱藏
useMouseInElement的isOutSide屬性可以監(jiān)測(cè)到是否超出監(jiān)測(cè)元素,v-show="!isOutSide" 即可
到此這篇關(guān)于Vue3.0 自己實(shí)現(xiàn)放大鏡效果案例講解的文章就介紹到這了,更多相關(guān)Vue3.0 實(shí)現(xiàn)放大鏡效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3使用vant檢索組件van-search遇到的問(wèn)題小結(jié)
當(dāng)清空按鈕與檢索按鈕同時(shí)居右時(shí),點(diǎn)擊clear清空按鈕事件時(shí)會(huì)同時(shí)觸發(fā)click-right-icon事件,這個(gè)時(shí)候容易觸發(fā)一系列問(wèn)題,小編小編給大家分享Vue3使用vant檢索組件van-search遇到的問(wèn)題小結(jié),感興趣的朋友一起看看吧2024-02-02在Vue3中實(shí)現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法
在開(kāi)發(fā)中,通常遇到四種全局狀態(tài)數(shù)據(jù):異步數(shù)據(jù)、同步數(shù)據(jù),傳統(tǒng)的Vue3使用不同機(jī)制處理這些數(shù)據(jù),而Zova框架通過(guò)Model機(jī)制來(lái)統(tǒng)一管理,簡(jiǎn)化了數(shù)據(jù)處理流程,提高了代碼的可維護(hù)性,本文介紹在Vue3中實(shí)現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法,感興趣的朋友一起看看吧2024-10-10Vue使用codemirror實(shí)現(xiàn)一個(gè)可插入自定義標(biāo)簽的textarea
這篇文章主要為大家詳細(xì)介紹了Vue如何使用codemirror實(shí)現(xiàn)一個(gè)可插入自定義標(biāo)簽的textarea,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02解決vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗問(wèn)題
這篇文章主要介紹了vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗,本文通過(guò)實(shí)例代碼給大家分享解決方案,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解
今天小編就為大家分享一篇element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05