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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 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基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
浅析java线程中断的办法
2018/07/29 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
医院保洁服务方案
2014/06/11 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
捐款通知怎么写
2015/04/24 职场文书
黄河绝恋观后感
2015/06/08 职场文书
农村婚庆主持词
2015/06/29 职场文书
学校食堂管理制度
2015/08/04 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL