在人人,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>
效果图如下: