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

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

项目架构采用vue-cli脚手架搭建的webpack项目

实现的效果如下:

鼠标经过button 右边显示出一个悬浮框 鼠标移出buttom元素 悬浮框隐藏 并且悬浮框可以随着鼠标的移动而改变位置

全部代码如下:

<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>

主要实现思路:

首先展示的悬浮框是绝对定位并且一开始是隐藏的display:none,触发 mouseover事情的时候把元素展示出来focusTooltip.css(“display”, “block”); 触发itemMouseout事件的时候把它隐藏掉focusTooltip.css(“display”, “none”); 然后当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件, 这个时候通过Event 对象拿到鼠标的位置(备注:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态),然后稍微调整下位置,最后给悬浮框的div元素设置top 和left属性, 其实悬浮框是基于html定位的 他的父元素没有相对定位position: relative; 不然会影响到top和left的属性,因为absolute会基于父元素relative进行定位。 鼠标事件整体触发的顺序为mouseover->mousemove->mouseout 最后悬浮框里面的内容会根据v-html对应的内容渲染(这块展示的内容由自己定义)

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

(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实现鼠标经过动画的具体代码,供大家参考,具体内容如下 详细代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <div class="box"> <div class="boxchilde" @mouseenter="flag=true" @mouseleave="fla

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

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

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

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

  • vue实现鼠标悬浮框效果

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

  • js实现鼠标悬浮框效果

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

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

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

  • Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam

  • JS实现右侧悬浮框效果

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

  • js实现图片显示局部,鼠标经过显示全部的效果

    这个是例如了CSS的margin负值和相对定位做的一个图片放大的效果.图片开始只是局部的,鼠标放上去显示整个图片. 无标题文档 body{ font-size:12px; } ul,li,ol{ margin:0; padding:0; list-style:none; } .box{ margin:100px; clear:both; border:1px solid #000; } .box ul li{ list-style:none; float:left; width:60px; he

  • 鼠标悬浮显示二级菜单效果的jquery实现

    1.布局: <div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" s

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

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

随机推荐