javaScript實(shí)現(xiàn)鼠標(biāo)在文字上懸浮時(shí)彈出懸浮層效果

2019-11-19 14:06:36

字體：大中小

供稿：網(wǎng)友

在人人，CSDN等一些網(wǎng)站，當(dāng)鼠標(biāo)在某個(gè)東西上懸浮時(shí)，會(huì)彈出一個(gè)懸浮層，鼠標(biāo)移開懸浮層消失。

比如說CSDN的通知（應(yīng)該是進(jìn)入寫新文章的頁面后頁面上方的那個(gè)鈴鐺），具體是什么實(shí)現(xiàn)的呢？上代碼：

<!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; /* 設(shè)置最大高度，當(dāng)高度達(dá)到此值時(shí)出現(xiàn)滾動(dòng)條 */   z-index: 10;   background-color: #E0E5E5;   overflow: auto;  /* 自動(dòng)添加滾動(dòng)條 */   box-shadow:0px 0px 10px #000; /* 外陰影 */   display: none; /* 默認(rèn)隱藏 */  }  #informTable{  table-layout:fixed;  /* 用于實(shí)現(xiàn)表格td自動(dòng)換行的部分代碼*/  width: 325px;  }   #informTable tr td{  width: 325px;  height:30px;  font-size: 16px;  font-family: Georgia;  color: #555555;  word-wrap:break-word; /*自動(dòng)換行*/  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>    編號(hào)5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號(hào)5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號(hào)5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號(hào)5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號(hào)5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號(hào)5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號(hào)5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號(hào)5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   </table>  </div> </body> </html>

效果圖如下：