vue实现鼠标悬浮框效果

本文实例为大家分享了vue实现鼠标悬浮框效果的具体代码，供大家参考，具体内容如下

效果：

html：

<div
  @mouseenter="enter" 
  @mouseleave="leave" 
  @mousemove="move"
>
鼠标触碰元素
</div>
 
<div v-show="popUpShow" class="hover_con" :style="positionStyle">
悬浮框
</div>

js：

export default {
    name: '',
    data() {
      return {
        popUpShow:false,
        positionStyle:{top:'0px',left:'0px'}
      }
    },
    methods: {
      enter() {
        this.popUpShow = true
      },
      leave() {
        this.popUpShow = false
      },
      move(event) {
        const x = event.pageX + 15 + 'px'
        const y = event.pageY + 10 + 'px'
        this.positionStyle = { top: y, left: x }  
      }
    }
}

css：

.hover_con{
  position: fixed;
  max-width: 220px;
  padding: 10px;
  border: 1px solid #666;
  background: #ccc;
}

关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别

offsetX、offsetY: 鼠标相对于事件源元素（srcElement）的X,Y坐标

clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。

pageX、pagey: 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没 有这2个属性

screenX、screenY: 鼠标相对于用户显示器屏幕左上角的X,Y坐标。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 实现超长文本截取,悬浮框提示

    vue 超长文本截取,悬浮框提示 样式: <style> .overflow-table .ivu-table-cell{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> table: <Table border :columns="comDataColunms" :data="comDataList" :loading="t

  • vue实现鼠标经过显示悬浮框效果

    vue实现鼠标经过显示悬浮框效果

    本文实例为大家分享了vue实现鼠标经过显示悬浮框效果的具体代码,供大家参考,具体内容如下 项目架构采用vue-cli脚手架搭建的webpack项目 实现的效果如下: 鼠标经过button 右边显示出一个悬浮框 鼠标移出buttom元素 悬浮框隐藏 并且悬浮框可以随着鼠标的移动而改变位置 全部代码如下: <template>   <div class="hello">     <div id="focus_toolTip" class=&

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

    需求 在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息.最终实现的效果如下: 鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出button元素的时候,这个显示框会消失. 分析 涉及到鼠标的移动事件. 鼠标事件有下面这几种: 1.onclick(鼠标点击事件) box.onclick = function(e){ console.log(e) } 2.onmousedown(鼠标按下事件) box.onmousedown = fun

  • vue实现鼠标悬浮框效果

    vue实现鼠标悬浮框效果

    本文实例为大家分享了vue实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 效果: html: <div   @mouseenter="enter"    @mouseleave="leave"    @mousemove="move" > 鼠标触碰元素 </div>   <div v-show="popUpShow" class="hover_con" :style=&

  • js实现鼠标悬浮框效果

    js实现鼠标悬浮框效果

    本文实例为大家分享了js实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">    

  • JS实现右侧悬浮框效果

    JS实现右侧悬浮框效果

    本文实例为大家分享了JS实现右侧悬浮框效果的具体代码,供大家参考,具体内容如下 让一个div始终悬浮在右下角 <!DOCTYPE html> <html lang="en"> <head>         <meta charset="UTF-8">         <title>Document</title>     <style>             #div1{    

  • Android实现通话最小化悬浮框效果

    Android实现通话最小化悬浮框效果

    大家在使用主流的视频软件以及直播软件的时候,经常会看到打开视频最小化以后,不是直接关闭,而是在屏幕右下角一个小窗口的样子,本次小编就给大家带来的是用Android实现在视频或者语音通话的时候,最小化也是出现一个悬浮框的效果. 关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方面也给有需要的人提供一个思路,让大家少走弯路.这里我也是参考了些有关And

  • Vue实现悬浮框自由移动+录音功能的示例代码

    Vue实现悬浮框自由移动+录音功能的示例代码

    目录 效果如下 主要功能 实现 1.封装第一个漂浮组件FloatBall.vue 2.封装第二个组件录音组件Audio.vue 3.recorder.js 效果如下 主要功能 1.一个漂浮的球,在全屏幕中自由移动遇到边边角角自动改变方向 ,自带动画效果 2.录音功能,可以录制用户的声音,可以下载为任意格式的音频文件到本地,也可以通过二进制流发给后端 由于后端要声音文件格式wav或者pcm,采样率16000,所以我改了配置文件,稍后我会介绍在哪里改,改什么什么样都是可以的. 注:代码我已经封装成组

  • js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法

  • Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件详解

    Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件详解

    目录 前言 图片说明 功能实现 这里需要注意一点 mouseover 和 mouseenter 的区别 总结 前言 前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标 鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述,因为是web端录屏也比较麻烦 这里用截图说明 图片说明 功能实现 之前没做过这种效果,问了一下我的组长-豪哥 他告诉我很简单,利用vue的@mouseenter 和 @mouseleave事件就可以完美解决 本着这个思路,我去寻求答案,

随机推荐