Vue实现鼠标经过文字显示悬浮框效果的示例代码


Posted in Javascript onOctober 14, 2020

需求

在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息。最终实现的效果如下:

Vue实现鼠标经过文字显示悬浮框效果的示例代码

鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出button元素的时候,这个显示框会消失。

分析

涉及到鼠标的移动事件。

鼠标事件有下面这几种:

1、onclick(鼠标点击事件)

box.onclick = function(e){
  console.log(e)
}

2、onmousedown(鼠标按下事件)

box.onmousedown = function(e){
  console.log(e)
}

3、onmouseup(鼠标松开事件)

box.onmouseup = function(e){
  console.log(e)
}

4、onmousemove(鼠标移动事件)

box.onmousemove = function(e){
  console.log(e)
}

5、onmouseout(鼠标划出事件)

box.onmouseout = function(e){
  console.log(e)
}

由鼠标的MouseEvent需要了解几个坐标:

一、clientX、clientY 点击位置距离当前body可视区域的x,y坐标

二、pageX、pageY 对于整个页面来说,包括了被卷去的body部分的长度

三、screenX、screenY 点击位置距离当前电脑屏幕的x,y坐标

四、offsetX、offsetY 相对于带有定位的父盒子的x,y坐标

五、x、y 和screenX、screenY一样

Vue实现鼠标经过文字显示悬浮框效果的示例代码

实现

我实现的思路是写了一个默认的空div,用来展示悬浮框信息。展示的悬浮框是绝对定位,一开始是隐藏的,当触发mouseover事件的时候,把display变为block块级元素,然后获取的event事件,

<div id="mouse" v-if="true" class="version_total">
  </div>
  .version_total{
  position: absolute;
  width: 10%;
  height: 5%;
 }

然后真正的div上面写个mousemove 绑定一个方法传递参数和event事件:在这个方法里面更改样式,最后用innerHtml来展现出来,需要给悬浮框的div元素设置top和left属性,具体的代码如下:

<div :class="[yxInfo[28].value==0 ? 'buttons2':'buttonsRed']" v-if="yxInfo[28]!=undefined" @mousemove="detailInfo($event,yxInfo[28])" @mouseleave="leave($event)" style="top: 37%;left: 63%">{{yxInfo[28].keyName}}</div>

detailInfo(e,data){
    var showDiv = document.getElementById('mouse')
    showDiv.style='background-color:#8c8c8c;border:1px solid black'
    showDiv.style.height='58px'
    showDiv.style.textAlign='left'
    showDiv.style.left = (event.pageX-300) + 'px'
    showDiv.style.top = (event.pageY-120) + 'px'
    showDiv.style.display = 'block'
    let time=data.time;
    let keyValue=data.value;
    var html ="<p>"+"时间:"+time+"</p>";
    var html2 ="<p>"+"值:"+keyValue+"</p>";
    showDiv.innerHTML = html+html2
   },
leave($event){
    var showDiv = document.getElementById('mouse')
    showDiv.style.display = 'none'
    showDiv.innerHTML = ''
}

到此这篇关于Vue实现鼠标经过文字显示悬浮框效果的示例代码的文章就介绍到这了,更多相关Vue 鼠标悬浮框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
JS实现滑动插件
Jan 15 Javascript
vue实现简单加法计算器
Oct 22 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 #Javascript
原生JS实现相邻月份日历
Oct 13 #Javascript
jquery简易手风琴插件的封装
Oct 13 #jQuery
原生js实现照片墙效果
Oct 13 #Javascript
js轮播图之旋转木马效果
Oct 13 #Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 #Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 #Javascript
You might like
我的论坛源代码(五)
2006/10/09 PHP
php 文件上传实例代码
2012/04/19 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
pandas数据分组和聚合操作方法
2018/04/11 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
校运会班级霸气口号
2015/12/24 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python