基于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 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
js实现列表按字母排序
Aug 11 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
JS实现百度搜索框
2021/02/25 Javascript
从零学Python之hello world
2014/05/21 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
python机器人行走步数问题的解决
2018/01/29 Python
PyQt5实现拖放功能
2018/04/25 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
python实现横向拼接图片
2020/03/23 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
高三生物教学反思
2014/01/25 职场文书
小学生倡议书范文
2014/05/13 职场文书
环保志愿者活动方案
2014/08/14 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
材料员岗位职责
2015/02/10 职场文书
端午节活动总结报告
2015/02/11 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python