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

 更新时间:2016年01月18日 09:06:39   投稿:mrr  
这篇文章主要介绍了基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层 的相关资料,需要的朋友可以参考下

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

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="https://www.jb51.net/" />
<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组合模式学习要点

    组合模式大概是设计模式里面使用最为广泛的模式之一了,模式本身理解起来也比较简单,以至于可以毫不费力的写出一个能用的组合模式伪代码
    2016-08-08
  • 如何用js实现鼠标向上滚动时浮动导航

    如何用js实现鼠标向上滚动时浮动导航

    今天给大家介绍一下使用JavaScript判断鼠标滑轮是不是向上滚动,当向上滚动的时候,导航条浮动在顶部位置。示例代码如下。
    2016-07-07
  • BootstrapValidator实现表单验证功能

    BootstrapValidator实现表单验证功能

    这篇文章主要为大家详细介绍了BootstrapValidator实现表单验证功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • js实现获取焦点后光标在字符串后

    js实现获取焦点后光标在字符串后

    这篇文章主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看
    2014-09-09
  • 线路分流自动跳转代码;希望对大家有用!

    线路分流自动跳转代码;希望对大家有用!

    线路分流自动跳转代码;希望对大家有用!...
    2006-12-12
  • JavaScript仿支付宝6位数字密码输入框

    JavaScript仿支付宝6位数字密码输入框

    最近做了一个项目,涉及到某宝购物支付密码的输入框功能,下面小编把实现思路分享到脚本之家平台供大家参考
    2016-12-12
  • js 关键词高亮(根据ID/tag高亮关键字)案例介绍

    js 关键词高亮(根据ID/tag高亮关键字)案例介绍

    关键词高亮在开发中会带来很多的方便,关键词高亮包括:根据ID高亮关键字/根据Tag名高亮关键字等等,感兴趣的朋友可以了解下,希望本文对你有所帮助
    2013-01-01
  • CSS3+JavaScript实现翻页幻灯片效果

    CSS3+JavaScript实现翻页幻灯片效果

    这篇文章主要介绍了CSS3+JavaScript实现翻页幻灯片效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • JS 控件事件小结

    JS 控件事件小结

    事件对于控件来说至关重要,控件的消息通信机制使用事件的成本最低,但是对于JS控件来说有一些麻烦需要解决,JS类本身不支持事件,DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件之前要做的
    2012-10-10
  • JavaScript将字符串转换为整数的方法

    JavaScript将字符串转换为整数的方法

    这篇文章主要介绍了JavaScript将字符串转换为整数的方法,涉及javascript中parseInt函数的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04

最新评论