在人人,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实现鼠标在文字上悬浮时弹出悬浮层的更多相关文章

  1. xtraTabbedMdiManager的标题上右鍵弹出关闭窗体菜单

    实现一个增值功能, 在xtraTabbedMdiManager组件TabPage标题上右鍵弹出关闭当前窗体的菜单. C# Code: private void xtraTabbedMdiManager ...

  2. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

  3. h5 安卓/IOS长按图片、文字禁止选中或弹出系统菜单 的解决方法

    最近在做IM的语音功能,发现当长按录音的时候手机会弹出来系统菜单, IOS下bug形式:1)长按的标签设置为css background的形式:不会弹出菜单: 2)但是当设置为img时,系统默认识别为 ...

  4. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

  5. input内文字点击消失 弹出层,可以写表单

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. IE中使用ajaxSubmit上传文件弹出下载提示框

    使用jQuery的ajaxSubmit 上传文件时,在IE中会弹出下载提示框: 解决方法:让action返回String类型,而不是ActionView,

  7. 【Javascript Demo】遮罩层和百度地图弹出层简单实现

    其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例:   2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...

  8. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  9. edusoho上传视频弹出abort之解决方案

    错误描述:edusoho上传如avi.mp4等容量大的图片(如100m以上或500m等)弹出abort提示框 原因:是因为web服务器apache默认上传文件有限制导致的 解决办法如下: (1)首先修 ...

随机推荐

  1. iwms后台出现从客户端(ctl00$cphMain$logo="<img src="pic/logo.g...")中检测到有潜在危险的 Request.Form 值。错误解决方法

    请将 web.config 文件中httpRuntime 配置节中的 requestValidationMode 特性设置为 requestValidationMode="2.0" ...

  2. OpenCV处理视频序列的类

    代码出处,opencv2 cookbook: /*--------------------------------------------------------------------------- ...

  3. Unity与web交互

    Unity在发布web时,重要的是Unity与Web的交互,参数的传递 1.unity调用网页js的函数:Application.ExternalCall js函数: <script langu ...

  4. listview中的adapter学习小结

    概述 Adapter是数据和UI之间的一个桥梁,在listview,gridview等控件中都会使用到,android给我们提拱了4个adapte供我们使用: BaseAdapter是一个抽象类,继承 ...

  5. onload="fixImage(this, 200, 200)"

    function fixImage(img, w, h) { var newImg = new Image(); //获得图片的原始尺寸 newImg.src = img.src; var lh; / ...

  6. Spring Boot 添加jersey-mvc-freemarker依赖后内置tomcat启动不了解决方案

    我在我的Spring Boot 项目的pom.xml中添加了jersey-mvc-freemarker依赖后,内置tomcat启动不了. 报错信息如下: org.springframework.con ...

  7. ssh三大框架集成后,jsp中采用forword标签提交时会报错的解决方案

    最近这两天心烦,所以没事就做做三大框架,对于今天遇到了一个烦心的事!或许有很多开发人员对于web.xml拦截器的认识不清,出现了这样的情况 <filter> <filter-name ...

  8. eclipse乱码

    eclipse乱码:Windows >general >Workspace UTF-8Windows >general >Editors >Text Editors &g ...

  9. Android Studio 2.3 instant run与miui冲突问题的解决

    Android Studio最近发布的2.3版本,由于这个版本改进后的Instant Run功能和很多国内ROM存在兼容问题,所以导致不得不做一些妥协策略,具体在小米Rom上,就是把小米rom的调试定 ...

  10. pyspider的一个诡异问题

    其Start_url两次抓取处理失败以后,其之后的所有抓取行为就不正常,似乎根本没有HTTP访问,我把该爬虫的taskdb清空,该爬虫爬取行为恢复正常.这个问题已提交pyspider官方,静待回答.