您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示懸浮框效果的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
具體內(nèi)容如下
項(xiàng)目架構(gòu)采用vue-cli腳手架搭建的webpack項(xiàng)目
實(shí)現(xiàn)的效果如下:
鼠標(biāo)經(jīng)過(guò)button 右邊顯示出一個(gè)懸浮框 鼠標(biāo)移出buttom元素 懸浮框隱藏 并且懸浮框可以隨著鼠標(biāo)的移動(dòng)而改變位置
全部代碼如下:
<template> <div class="hello"> <div id="focus_toolTip" class="special_focus_toolTip" v-html="toolTopbody"></div> <button class="buttonStyle" @mousemove="itemMousemove($event)" @mouseover="itemMouseover" @mouseout="itemMouseout" >懸浮框測(cè)試</button> </div> </template> <script> import $ from "jquery"; export default { name: "HelloWorld", data() { return { toolTopbody: "" }; }, methods: { itemMouseover: function() { var focusTooltip = $("#focus_toolTip"); focusTooltip.css("display", "block"); }, itemMouseout: function() { var focusTooltip = $("#focus_toolTip"); focusTooltip.css("display", "none"); }, itemMousemove: function(e) { var self = this; var focusTooltip = $("#focus_toolTip"); focusTooltip.css("top", e.clientY - 80 + "px"); focusTooltip.css("left", e.clientX + 100 + "px"); var headerHtml = "<div style='font-size:12px;color: #fec443;font-weight: bold;font-family: MicrosoftYaHei;'>" + "我的懸浮框參考:" + "</div>"; var effectHtml = "<div style='font-size:12px;margin-top:5px;'>" + "</div>"; self.toolTopbody = headerHtml + effectHtml; } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .buttonStyle { margin-left: 150px; } .special_focus_toolTip { z-index: 7; position: absolute; display: none; width: 400px; height: 130px; border-style: solid; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.701961); border-width: 0px; border-color: #333333; border-radius: 4px; color: #ffffff; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; font-family: "Microsoft YaHei"; line-height: 21px; padding: 10px 10px; } </style>
主要實(shí)現(xiàn)思路:
首先展示的懸浮框是絕對(duì)定位并且一開(kāi)始是隱藏的display:none,觸發(fā) mouseover事情的時(shí)候把元素展示出來(lái)focusTooltip.css(“display”, “block”); 觸發(fā)itemMouseout事件的時(shí)候把它隱藏掉focusTooltip.css(“display”, “none”); 然后當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí),就會(huì)發(fā)生 mousemove 事件, 這個(gè)時(shí)候通過(guò)Event 對(duì)象拿到鼠標(biāo)的位置(備注:Event 對(duì)象代表事件的狀態(tài),比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)),然后稍微調(diào)整下位置,最后給懸浮框的div元素設(shè)置top 和left屬性, 其實(shí)懸浮框是基于html定位的 他的父元素沒(méi)有相對(duì)定位position: relative; 不然會(huì)影響到top和left的屬性,因?yàn)閍bsolute會(huì)基于父元素relative進(jìn)行定位。 鼠標(biāo)事件整體觸發(fā)的順序?yàn)閙ouseover->mousemove->mouseout 最后懸浮框里面的內(nèi)容會(huì)根據(jù)v-html對(duì)應(yīng)的內(nèi)容渲染(這塊展示的內(nèi)容由自己定義)
感謝各位的閱讀!關(guān)于“vue如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示懸浮框效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。