vue實現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果

更新時間：2022年03月30日 15:46:21 作者：holiday-jq

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

項目架構(gòu)采用vue-cli腳手架搭建的webpack項目

實現(xiàn)的效果如下：

鼠標(biāo)經(jīng)過button 右邊顯示出一個懸浮框鼠標(biāo)移出buttom元素懸浮框隱藏并且懸浮框可以隨著鼠標(biāo)的移動而改變位置

全部代碼如下：

<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"
? ? >懸浮框測試</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>

主要實現(xiàn)思路：

首先展示的懸浮框是絕對定位并且一開始是隱藏的display:none，觸發(fā) mouseover事情的時候把元素展示出來focusTooltip.css(“display”, “block”); 觸發(fā)itemMouseout事件的時候把它隱藏掉focusTooltip.css(“display”, “none”); 然后當(dāng)鼠標(biāo)指針在指定的元素中移動時，就會發(fā)生 mousemove 事件，這個時候通過Event 對象拿到鼠標(biāo)的位置（備注：Event 對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)），然后稍微調(diào)整下位置，最后給懸浮框的div元素設(shè)置top 和left屬性，其實懸浮框是基于html定位的他的父元素沒有相對定位position: relative; 不然會影響到top和left的屬性，因為absolute會基于父元素relative進(jìn)行定位。鼠標(biāo)事件整體觸發(fā)的順序為mouseover->mousemove->mouseout 最后懸浮框里面的內(nèi)容會根據(jù)v-html對應(yīng)的內(nèi)容渲染（這塊展示的內(nèi)容由自己定義）

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

您可能感興趣的文章: