欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-11-28 17:54:04
在人人，csdn等一些网站，当鼠标在某个东西上悬浮时，会弹出一个悬浮层，鼠标移开悬浮层消失。 比如说csdn的通知（应该是进入写新文章的页面后页面上方的那个铃铛），具体是...

在人人，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>

效果图如下：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 解密ThinkPHP3.1.2版本之模板继承

下一篇： 高端红木家具O2O网站运营分享 口碑传播值得尝试

推荐阅读