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 相关文章推荐
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
js实现可爱的气泡特效
Sep 05 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
B2K与车机的中波PK
2021/03/02 无线电
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
jquery $.ajax相关用法分享
2012/03/16 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python实现无证书加密解密实例
2014/10/27 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
如何验证python安装成功
2020/07/06 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
接口中的方法可以是abstract的吗
2015/07/23 面试题
业务经理的岗位职责
2013/11/16 职场文书
采购主管的岗位职责
2013/12/17 职场文书
高中生物教学反思
2014/02/05 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
详解Python类和对象内容
2021/06/22 Python
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
Linux中各个目录的作用与内容
2022/06/28 Servers