cari

Rumah >hujung hadapan web >tutorial js >javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

亚连
亚连asal
2018-05-29 10:35:551894semak imbas

这篇文章主要为大家详细介绍了javaScript实现鼠标在文字上悬浮时弹出悬浮层效果的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在人人，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=&#39;block&#39;; 
  // document.getElementById("inform").css("display","block"); 
 } 
 //隐藏悬浮层 
 function hiddenInform(event){ 
  var informp = document.getElementById(&#39;inform&#39;); 
  var x=event.clientX; 
  var y=event.clientY; 
  var px1 = informp.offsetLeft; 
  var py1 = informp.offsetTop; 
  var px2 = informp.offsetLeft + informp.offsetWidth; 
  var py2 = informp.offsetTop + informp.offsetHeight; 
  if( x < px1 || x > px2 || y < py1 || y > py2){ 
  document.getElementById(&#39;inform&#39;).style.display=&#39;none&#39;; 
  } 
  
 } 
 
 
</script> 
<body> 
 <a id="btn" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform()"> 
 警告消息 
 </a> 
 <p 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> 
 </p> 
</body> 
</html>

效果图如下：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

spirngmvc js传递复杂json参数到controller的实例

Vue.js 表单控件操作小结

js传递数组参数到后台controller的方法

Atas ialah kandungan terperinci javaScript实现鼠标在文字上悬浮时弹出悬浮层效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：怎样操作Node升级版本Artikel seterusnya：如何操作Angular实现模版驱动表单的自定义校验功能

Artikel berkaitan

Lihat lagi