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 定义function的三种方式小结
Oct 16 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
浅谈JavaScript字符集
May 22 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python二进制文件的转译详解
2019/07/03 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
预备党员党课思想汇报
2014/01/13 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript