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='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>

效果图如下：

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

您可能感兴趣的文章:

  • JS实现悬浮移动窗口(悬浮广告)的特效
  • JavaScript 悬浮窗口实现代码
  • JS控制弹出悬浮窗口(一览画面)的实例代码
  • JS实现自动固定顶部的悬浮菜单栏效果
  • JS实现侧悬浮浮动实例代码
  • javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）
  • js 固定悬浮效果实现思路代码
  • js点击出现悬浮窗效果不使用JQuery插件
  • js 左右悬浮对联广告特效代码
  • js制作的鼠标悬浮时产生的下拉框效果
赞 (0)

相关推荐

  • javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）

    具体用法是这样的: 将Javascript代码放到</body>前(将脚本代码放在页面底端有助于提高页面速度,但是我现在还没有切身的体会) 复制代码 代码如下: <script language=JavaScript> function mouseOutPic()    //当鼠标移出时,隐藏原图 { if(window.event.toElement.id!="img000") bigPic.style.visibility = "hidden&qu

  • js 固定悬浮效果实现思路代码

    复制代码 代码如下: <script type="text/javascript"> (function($){ var ele_fix = $("#div_right"); //浮动窗口 var _main = $(".main"); //浮动区域 var ele_offset_top = ele_fix.offset().top; //浮动区域高度 $(window).scroll(function(){ var scro_top

  • JS实现侧悬浮浮动实例代码

    JS实现侧悬浮浮动实例代码

    效果: 思路: 首先,加载onscroll控制滚动条.然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点.最后将其参数返回.再在onscroll里面调用此方法,并且将终点计算出来赋予此方法的参数. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css"> 

  • JS控制弹出悬浮窗口(一览画面)的实例代码

    JS控制弹出悬浮窗口(一览画面)的实例代码

    在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu

  • js点击出现悬浮窗效果不使用JQuery插件

    JQuery有很多这样的插件,但是我们公司不用jquery,没有插件,所以我就试着自己写,我也不知道别人是怎么写的,纯粹是按着自己的想法来的. 直接上代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript">

  • JS实现悬浮移动窗口(悬浮广告)的特效

    js方法: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <title> New Document </title>        <meta name="Gener

  • js制作的鼠标悬浮时产生的下拉框效果

    先给大家补补课,讲个简单的例子: 复制代码 代码如下: <html><head> <meta type-equiv="Content-Type" content="text/html"> <meta charset="utf-8″> <script type="text/javascript"> jq=jQuery.noConflict(); jq=(document).rea

  • JS实现自动固定顶部的悬浮菜单栏效果

    JS实现自动固定顶部的悬浮菜单栏效果

    本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • JavaScript 悬浮窗口实现代码

    JavaScript 悬浮窗口实现代码

    效果如图:代码如下: 悬浮窗口示例 window.onscroll = function () { var div = document.getElementById("divSuspended"); div.style.top = document.body.scrollTop; } window.onresize = window.onscroll; function init(){ var df = document.createDocumentFragment(); for(v

  • js 左右悬浮对联广告特效代码

    js制作web网页左右悬浮广告特效. 引用: 复制代码 代码如下: <script src="js/ad.js" type="text/javascript"></script> 2.页面调用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

随机推荐