javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2018-03-24 16:03
756 查看
在人人,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实现鼠标在文字上悬浮时弹出悬浮层
- javascript实现鼠标移到Image上方时显示文字效果的方法
- javascript实现鼠标移到Image上方时显示文字效果的方法
- jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
- 基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
- 基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
- JavaScript一点也不简单—实现“鼠标控制局部文字滚动效果”初探
- 原生javascript实现鼠标在窗口按下拖动,元素放大效果。
- javascript简单实现类似QQ头像弹出效果的方法
- html+javascript实现可拖动可提交的弹出层对话框效果
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- JS实现跟随鼠标的链接文字提示框效果
- 全文检索等鼠标滑上去(不用点击),里面提示文字要自动消失效果的实现。
- JS实现侧边栏鼠标经过弹出框+缓冲效果
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- 『改进』逐行滚动文字效果的Javascript实现
- Javascript特效实现鼠标移动到小图,查看大图效果;
- JavaScript实现类似拉勾网的鼠标移入移出效果