[转]利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失。比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码:

  1. <!doctype html>
  2. <head>
  3. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  4.     <title>TEST</title>
  5. </head>
  6. <style type=“text/css”>
  7.     body{
  8.         position: relative;
  9.     }
  10.     #inform{
  11.           position: absolute;
  12.           top: 20px;
  13.           width: 350px;
  14.           max-height: 250px;           /* 设置最大高度,当高度达到此值时出现滚动条 */
  15.           z-index: 10;
  16.           background-color: #E0E5E5;
  17.           overflow: auto;              /* 自动添加滚动条 */
  18.           box-shadow:0px 0px 10px #000;   /* 外阴影 */
  19.           display: none;   /* 默认隐藏 */
  20.     }
  21.     #informTable{
  22.         table-layout:fixed;         /* 用于实现表格td自动换行的部分代码*/
  23.         width: 325px;
  24.     }
  25.     #informTable tr td{
  26.         width: 325px;
  27.         height:30px;
  28.         font-size: 16px;
  29.         font-family: Georgia;
  30.         color: #555555;
  31.         word-wrap:break-word;   /*自动换行*/
  32.         padding: 0 0 0 0;
  33.     }
  34.     #informTable tr td:hover{
  35.         background-color: #D9D9D9;
  36.     }
  37.     #inform hr{
  38.         border:1;
  39.         width: 325px;
  40.         margin-bottom: 0px;
  41.     }
  42. </style>
  43. <script type=“text/javascript”>
  44.       //显示悬浮层
  45.       function showInform(){
  46.         document.getElementById(“inform”).style.display=‘block’;
  47.          // document.getElementById(“inform”).css(“display”,”block”);
  48.       }
  49.       //隐藏悬浮层
  50.       function hiddenInform(event){
  51.          var informDiv = document.getElementById(‘inform’);
  52.          var x=event.clientX;
  53.          var y=event.clientY;
  54.          var divx1 = informDiv.offsetLeft;
  55.          var divy1 = informDiv.offsetTop;
  56.          var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
  57.          var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
  58.          if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
  59.               document.getElementById(‘inform’).style.display=‘none’;
  60.          }
  61.       }
  62. </script>
  63. <body>
  64.     <a id=“btn” onMouseOver=“javascript:showInform();”  onMouseOut=“hiddenInform()”>
  65.         利用javaScript实现鼠标在文字上悬浮时弹出悬浮层
  66.     </a>
  67.     <div id=“inform”  onMouseOver=“javascript:showInform();”  onMouseOut=“hiddenInform(event)”>
  68.            <table id=“informTable”>
  69.               <tr>
  70.                 <td>
  71.                      编号5005车辆发车间隔异常
  72.                     <hr/>
  73.                 </td>
  74.               </tr>
  75.               <tr>
  76.                 <td>
  77.                      编号5005车辆发车间隔异常
  78.                     <hr/>
  79.                 </td>
  80.               </tr>
  81.               <tr>
  82.                 <td>
  83.                      编号5005车辆发车间隔异常
  84.                     <hr/>
  85.                 </td>
  86.               </tr>
  87.               <tr>
  88.                 <td>
  89.                      编号5005车辆发车间隔异常
  90.                     <hr/>
  91.                 </td>
  92.               </tr>
  93.               <tr>
  94.                 <td>
  95.                      编号5005车辆发车间隔异常
  96.                     <hr/>
  97.                 </td>
  98.               </tr>
  99.               <tr>
  100.                 <td>
  101.                      编号5005车辆发车间隔异常
  102.                     <hr/>
  103.                 </td>
  104.               </tr>
  105.               <tr>
  106.                 <td>
  107.                      编号5005车辆发车间隔异常
  108.                     <hr/>
  109.                 </td>
  110.               </tr>
  111.               <tr>
  112.                 <td>
  113.                      编号5005车辆发车间隔异常
  114.                     <hr/>
  115.                 </td>
  116.               </tr>
  117.            </table>
  118.     </div>
  119. </body>
  120. </html>

效果图如下:

未经允许不得转载:哈勃私语 » [转]利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

本文共5055个字 创建时间:2017年7月1日9:11   

分享到:更多 ()