欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)鼠標(biāo)懸浮框效果

 更新時(shí)間：2022年03月31日 10:45:11   作者：天高任鳥飛dyz（前端）  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)懸浮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)鼠標(biāo)懸浮框效果的具體代碼，供大家參考，具體內(nèi)容如下

效果：

html：

<div
? @mouseenter="enter"?
? @mouseleave="leave"?
? @mousemove="move"
>
鼠標(biāo)觸碰元素
</div>
?
<div v-show="popUpShow" class="hover_con" :style="positionStyle">
懸浮框
</div>

js：

export default {
? ? name: '',
? ? data() {
? ? ? return {
? ? ? ? popUpShow:false,
? ? ? ? positionStyle:{top:'0px',left:'0px'}
? ? ? }
? ? },
? ? methods: {
? ? ? enter() {
? ? ? ? this.popUpShow = true
? ? ? },
? ? ? leave() {
? ? ? ? this.popUpShow = false
? ? ? },
? ? ? move(event) {
? ? ? ? const x = event.pageX + 15 + 'px'
? ? ? ? const y = event.pageY + 10 + 'px'
? ? ? ? this.positionStyle = { top: y, left: x } ?
? ? ? }
? ? }
}

css：

.hover_con{
? position: fixed;
? max-width: 220px;
? padding: 10px;
? border: 1px solid #666;
? background: #ccc;
}

關(guān)于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的區(qū)別

offsetX、offsetY: 鼠標(biāo)相對(duì)于事件源元素（srcElement）的X,Y坐標(biāo)

clientX、clientY: 鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)域的X，Y坐標(biāo)（窗口坐標(biāo)），可視區(qū)域不包括工具欄和滾動(dòng)條。

pageX、pagey: 類似于event.clientX、event.clientY，但它們使用的是文檔坐標(biāo)而非窗口坐標(biāo)。這2個(gè)屬性不是標(biāo)準(zhǔn)屬性，但得到了廣泛支持。IE事件中沒(méi) 有這2個(gè)屬性

screenX、screenY: 鼠標(biāo)相對(duì)于用戶顯示器屏幕左上角的X,Y坐標(biāo)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論