javaScript实现鼠标在文字上悬浮时弹出悬浮层效果


Posted in Javascript onApril 12, 2020

在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失。

比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码:

<!doctype html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>TEST</title> 
</head> 
<style type="text/css"> 
 body{ 
 position: relative; 
 } 
 #inform{ 
 position: absolute; 
 top: 20px; 
 width: 350px; 
 max-height: 250px; /* 设置最大高度,当高度达到此值时出现滚动条 */ 
 z-index: 10; 
 background-color: #E0E5E5; 
 overflow: auto; /* 自动添加滚动条 */ 
 box-shadow:0px 0px 10px #000; /* 外阴影 */ 
 display: none; /* 默认隐藏 */ 
 } 
 #informTable{ 
 table-layout:fixed; /* 用于实现表格td自动换行的部分代码*/ 
 width: 325px; 
 } 
 
 #informTable tr td{ 
 width: 325px; 
 height:30px; 
 font-size: 16px; 
 font-family: Georgia; 
 color: #555555; 
 word-wrap:break-word; /*自动换行*/ 
 padding: 0 0 0 0; 
 } 
 #informTable tr td:hover{ 
 background-color: #D9D9D9; 
 } 
 #inform hr{ 
 border:1; 
 width: 325px; 
 margin-bottom: 0px; 
 } 
 
</style> 
<script type="text/javascript"> 
 //显示悬浮层 
 function showInform(){ 
 document.getElementById("inform").style.display='block'; 
 // document.getElementById("inform").css("display","block"); 
 } 
 //隐藏悬浮层 
 function hiddenInform(event){ 
 var informDiv = document.getElementById('inform'); 
 var x=event.clientX; 
 var y=event.clientY; 
 var divx1 = informDiv.offsetLeft; 
 var divy1 = informDiv.offsetTop; 
 var divx2 = informDiv.offsetLeft + informDiv.offsetWidth; 
 var divy2 = informDiv.offsetTop + informDiv.offsetHeight; 
 if( x < divx1 || x > divx2 || y < divy1 || y > divy2){ 
 document.getElementById('inform').style.display='none'; 
 } 
 
 } 
 
 
</script> 
<body> 
 <a id="btn" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform()"> 
 警告消息 
 </a> 
 <div id="inform" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform(event)"> 
 <table id="informTable"> 
 <tr> 
 <td> 
  编号5005车辆发车间隔异常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  编号5005车辆发车间隔异常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  编号5005车辆发车间隔异常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  编号5005车辆发车间隔异常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  编号5005车辆发车间隔异常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  编号5005车辆发车间隔异常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  编号5005车辆发车间隔异常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  编号5005车辆发车间隔异常 
  <hr/> 
 </td> 
 </tr> 
 </table> 
 </div> 
</body> 
</html>

效果图如下:

javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

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

Javascript 相关文章推荐
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
javascript事件问题
Sep 05 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 #Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 #Javascript
使用Angular CLI生成路由的方法
Mar 24 #Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 #Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 #Javascript
在vue中使用jointjs的方法
Mar 24 #Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 #Javascript
You might like
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
如何使用angularJs
2017/05/08 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python中的yield浅析
2014/06/16 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
深入理解python中的atexit模块
2017/03/07 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
大学生毕业自我鉴定范文
2014/02/03 职场文书
承诺书范本
2015/01/21 职场文书
音乐之声观后感
2015/06/04 职场文书
三八妇女节主持词
2015/07/04 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python