悬浮框的实现

分手后的思念是犯贱 2022-05-22 12:15 320阅读 0赞

悬浮框的实现需要鼠标移上和移出两个事件，本例是基于vue做的：

<div @mouseover="overShow(bossJobInfo.postDescription)" @mouseout="outHide" class="ellipsis-specail" style="-webkit-box-orient: vertical;">{ { bossJobInfo.postDescription }}</div>

重点是overShow()和outHide()方法：

overShow (value) {
            var e = event || window.event
            var showDiv = document.getElementById('showDiv')
            var x = (e.pageX - 200) + 'px'
            var y = (e.pageY - 200) + 'px'
            showDiv.style.left = x
            showDiv.style.top = y
            showDiv.style.border = '1px solid #F90'
            showDiv.style.background = '#E3EDCD'
            showDiv.style.position = 'absolute'
            showDiv.style.width = '40%'
            showDiv.style.zIndex = '9999'
            showDiv.style.display = 'block'
            showDiv.innerHTML = value
        },
        outHide () {
            var showDiv = document.getElementById('showDiv')
            showDiv.style.display = 'none'
            showDiv.innerHTML = ''
        }

主要是overShow()方法，根据鼠标位置，定义悬浮框的位置，以及使用js动态加载css样式；因为我的悬浮框中要能使用html样式，所以使用的innerHTML方法，这样value中的html标签能正常展示，如果只需展示内容，使用innerContent即可。

发表评论取消回复

表情：

评论列表（有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 全局悬浮框（可拖动）

Android 悬浮框效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

Bertha 。/ 2023年06月21日 12:25/ 0 赞/ 18 阅读

相关基于jQuery实现首页悬浮框

基于jQuery实现首页悬浮框，如下图所示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

墨蓝/ 2023年01月23日 03:53/ 0 赞/ 233 阅读

相关 vue鼠标悬停出现悬浮框

之前遇到一个需求，电商主页中鼠标悬停到某个a标签上面，下面就会出现一个div框，里面有各种选项。这里的主要问题是，如何做到鼠标悬停出现下拉框，并且鼠标移走下拉框和标签后下拉框消

╰半夏微凉°/ 2022年12月18日 00:48/ 0 赞/ 530 阅读

相关自定义Dialog悬浮实现登录框

之前看好多登录框都以为是一个Activity，然后登录成功后start另一个Activity，原来利用悬浮对话框也可以实现。原理如下：在主活动main与

港控/mmm°/ 2022年09月19日 01:28/ 0 赞/ 275 阅读

相关浅谈百度外卖筛选悬浮框效果的实现

开始在项目中一直实现类似于百度外卖的上滑会使得筛选框的界面停留在顶部，下滑的时候就会随着ScrollView下滑动。这种效果也在网上百度了很多，但是会出现在滑动过快的时候出现抖

Love The Way You Lie/ 2022年08月20日 11:28/ 0 赞/ 167 阅读

相关悬浮框

<%@ page language="java" import="java.util.\" pageEncoding="UTF-8"%> <% String path

比眉伴天荒/ 2022年08月11日 16:32/ 0 赞/ 204 阅读

相关 Xamarin.Android页面实现悬浮框弹出

Xamarin Android实现Activity页面悬浮框弹出，底层半透明遮挡效果。 1.创建要弹出的Activity页面视图：IndexFloatView； 2.主体核

﹏ヽ暗。殇╰゛Y/ 2022年05月25日 01:27/ 0 赞/ 481 阅读

相关悬浮框的实现

悬浮框的实现需要鼠标移上和移出两个事件，本例是基于vue做的： <div @mouseover="overShow(bossJobInfo.postDescripti

分手后的思念是犯贱/ 2022年05月22日 12:15/ 0 赞/ 321 阅读

相关 Vue.js 自定义指令，实现可以拖动的悬浮框

Vue支持我们自己开发一些使用方法类似内置指令（如v-show、v-for等）的自定义指令，通常用在一些对底层DOM操作的地方。本文简单介绍一下自定义指令的基本用法，并实现一个

刺骨的言语ヽ痛彻心扉/ 2022年05月21日 05:59/ 0 赞/ 611 阅读

相关 echart-悬浮框-初探

今天有一个需求是这样的柱状图：当鼠标移到 x轴线上显示弹框内容一　　　　当鼠标移到柱状图上显示弹框内容二 ![1074458-2019071217482

怼烎@/ 2021年11月22日 14:28/ 0 赞/ 385 阅读