快捷導(dǎo)航

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

更新時間：2020年04月12日 14:31:42 作者：Crazy光光

這篇文章主要為大家詳細介紹了javaScript實現(xiàn)鼠標在文字上懸浮時彈出懸浮層效果的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在人人，CSDN等一些網(wǎng)站，當鼠標在某個東西上懸浮時，會彈出一個懸浮層，鼠標移開懸浮層消失。

比如說CSDN的通知（應(yīng)該是進入寫新文章的頁面后頁面上方的那個鈴鐺），具體是什么實現(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è)置最大高度，當高度達到此值時出現(xiàn)滾動條 */ 
 z-index: 10; 
 background-color: #E0E5E5; 
 overflow: auto; /* 自動添加滾動條 */ 
 box-shadow:0px 0px 10px #000; /* 外陰影 */ 
 display: none; /* 默認隱藏 */ 
 } 
 #informTable{ 
 table-layout:fixed; /* 用于實現(xiàn)表格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車輛發(fā)車間隔異常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  編號5005車輛發(fā)車間隔異常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  編號5005車輛發(fā)車間隔異常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  編號5005車輛發(fā)車間隔異常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  編號5005車輛發(fā)車間隔異常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  編號5005車輛發(fā)車間隔異常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  編號5005車輛發(fā)車間隔異常 
  <hr/> 
 </td> 
 </tr> 
 <tr> 
 <td> 
  編號5005車輛發(fā)車間隔異常 
  <hr/> 
 </td> 
 </tr> 
 </table> 
 </div> 
</body> 
</html>

效果圖如下：