基于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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
关于js类的定义
Jun 28 Javascript
JSON 数据格式介绍
Jan 13 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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 array_push 数组函数
2009/12/26 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
javascript数据类型详解
2017/02/07 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python比较2个时间大小的实现方法
2018/04/10 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Sanic框架配置操作分析
2018/07/17 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
django使用多个数据库的方法实例
2021/03/04 Python
法学专业应届生求职信
2013/10/16 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
《猫》教学反思
2014/02/26 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书