悬浮框的实现

分手后的思念是犯贱 2022-05-22 12:15 346阅读 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 条评论，346人围观）

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

相关阅读

相关 js运动技术--右侧悬浮框！

目的让一个div悬浮框始终悬浮于页面右下脚： <!DOCTYPE html> <html> <head> <meta charset="

旧城等待，/ 2024年02月17日 23:14/ 0 赞/ 22 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关悬浮框

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

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

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

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

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

相关悬浮框的实现

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

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

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

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

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

相关 echart-悬浮框-初探

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

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