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 相关文章推荐
今天是星期几的4种JS代码写法
Sep 17 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
javascript随机变色实例代码
Oct 15 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
php swoft框架实例用法
2020/12/22 PHP
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
深入理解NumPy简明教程---数组1
2016/12/17 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
python 将md5转为16字节的方法
2018/05/29 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
铅球加油稿100字
2014/09/26 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015年植树节活动总结
2015/02/06 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL