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对象是否拥有某一个属性的js代码
Aug 16 Javascript
js 走马灯简单实例
Nov 21 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
记一次react前端项目打包优化的方法
Mar 30 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
详解JavaScript的this指向和绑定
Sep 08 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 分库分表hash算法
2009/11/12 PHP
PHP中的表达式简述
2016/05/29 PHP
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
python人人网登录应用实例
2014/09/26 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python之super的使用小结
2018/08/13 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
使用tensorflow实现线性回归
2018/09/08 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
逃课上网检讨书
2014/02/20 职场文书
父亲节活动策划方案
2014/08/24 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
flex弹性布局详解
2022/03/20 HTML / CSS
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏