基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层


Posted in Javascript onJanuary 18, 2016

很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果。
代码实例如下:

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="https://3water.com/" />
<title>三水点靠木</title>
<style type="text/css">
#content
{
width:100px;
height:100px;
background:green;
position:relative;
margin:100px;
}
#inform
{
width:200px;
height:200px;
border:1px solid #ccc;
background:white;
display:none;
position:absolute;
}
#inform span
{
width:0px;
height:0px;
border-width:10px;
border-style:none solid solid none;
position:absolute;
}
#inform .tb-border
{
left:-10px;
border-color:transparent #ccc transparent transparent;
top:-1px;
}
#inform .tb-background
{
left:-9px;
border-color:transparent white transparent transparent;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var content=document.getElementById("content");
var inform=document.getElementById("inform");
content.onmouseover=function(ev)
{
var ev=ev||event;
inform.style.display="block";
inform.style.left=(ev.clientX-this.offsetLeft+20)+"px";
inform.style.top=(ev.clientY-this.offsetTop-20)+"px";
}
content.onmousemove=function(ev)
{
var ev=ev||event;
inform.style.left=(ev.clientX-this.offsetLeft+20)+"px";
inform.style.top=(ev.clientY-this.offsetTop-10)+"px";
}
content.onmouseout=function(ev){inform.style.display="none";}
}
</script>
</head>
<body>
<div id="content">
<div id="inform">
<span class="tb-border"></span>
<span class="tb-background"></span>
</div>
</div>
</body>
</html>

以上代码实现了我们的要求,当鼠标放在div中的时候能够弹出一个信息层,并且能够跟随鼠标移动,弹出层的带有指示的箭头,代码非常的简单这里就不多介绍了,如有任何疑问可以跟帖留言或者参阅相关阅读。

Javascript 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
javascript实现获取字符串hash值
May 10 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 #Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 #Javascript
轻松实现js图片预览功能
Jan 18 #Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 #Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 #Javascript
node.js+express制作网页计算器
Jan 17 #Javascript
JQuery实现网页右侧随动广告特效
Jan 17 #Javascript
You might like
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
javascript常用的方法分享
2015/07/01 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python实现简单的代理服务器
2015/07/25 Python
Python实现基本线性数据结构
2016/08/22 Python
Python中的日期时间处理详解
2016/11/17 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python ssh 执行shell命令的示例
2020/09/29 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
《秋游》教学反思
2014/04/24 职场文书
班级团队活动方案
2014/08/14 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
给校长的建议书范文
2015/09/14 职场文书