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


Posted in Javascript onApril 12, 2020

在人人,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实现鼠标在文字上悬浮时弹出悬浮层效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
vue实现公共方法抽离
Jul 31 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 #Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 #Javascript
使用Angular CLI生成路由的方法
Mar 24 #Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 #Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 #Javascript
在vue中使用jointjs的方法
Mar 24 #Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 #Javascript
You might like
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
js window.event对象详尽解析
2009/02/17 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
用Python抢过年的火车票附源码
2015/12/07 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python生成word合同的实例方法
2021/01/12 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
出生公证书样本
2014/04/04 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
如何用python反转图片,视频
2021/04/24 Python