快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮彈出跟隨鼠標(biāo)移動(dòng)的帶箭頭的信息層

更新時(shí)間：2016年01月18日 09:06:39 投稿：mrr

這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮彈出跟隨鼠標(biāo)移動(dòng)的帶箭頭的信息層的相關(guān)資料,需要的朋友可以參考下

很多網(wǎng)站，當(dāng)鼠標(biāo)懸浮在一個(gè)元素上的時(shí)候能夠彈出一個(gè)信息說明層，并且此層能夠跟隨鼠標(biāo)移動(dòng)，同時(shí)彈出的層帶有箭頭，此箭頭指向鼠標(biāo)懸浮的元素，下面就通過實(shí)例代碼簡(jiǎn)單介紹一下如何實(shí)現(xiàn)此效果。
代碼實(shí)例如下:

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.fzitv.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>

以上代碼實(shí)現(xiàn)了我們的要求，當(dāng)鼠標(biāo)放在div中的時(shí)候能夠彈出一個(gè)信息層，并且能夠跟隨鼠標(biāo)移動(dòng)，彈出層的帶有指示的箭頭，代碼非常的簡(jiǎn)單這里就不多介紹了，如有任何疑問可以跟帖留言或者參閱相關(guān)閱讀。

您可能感興趣的文章:

相關(guān)文章

Openlayers顯示地理位置坐標(biāo)的方法
這篇文章主要為大家詳細(xì)介紹了Openlayers顯示地理位置坐標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
JavaScript簡(jiǎn)單獲取系統(tǒng)當(dāng)前時(shí)間完整示例
這篇文章主要介紹了JavaScript簡(jiǎn)單獲取系統(tǒng)當(dāng)前時(shí)間的方法,涉及javascript針對(duì)日期與時(shí)間的判斷以及字符串組合的相關(guān)技巧,需要的朋友可以參考下
2016-08-08
js實(shí)現(xiàn)文字超出部分用省略號(hào)代替實(shí)例代碼
關(guān)于超出一定字?jǐn)?shù)用省略號(hào)顯示的問題，這種要求在我們?nèi)粘ｉ_發(fā)的時(shí)候經(jīng)常見到，我們之前基本都是用CSS來完成的，今天給大家分享個(gè)Javascript實(shí)現(xiàn)這個(gè)功能的示例代碼，有需要的可以參考借鑒。
2016-09-09
JS數(shù)據(jù)類型判斷的幾種常用方法
這篇文章主要介紹了JS判斷數(shù)據(jù)類型的幾種常用方法，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
js 處理數(shù)組重復(fù)元素示例代碼
數(shù)組重復(fù)元素如何處理，這是在項(xiàng)目實(shí)戰(zhàn)中經(jīng)常遇到的，針對(duì)這個(gè)問題，下文給出詳細(xì)解決方法，希望對(duì)大家有所幫助
2013-12-12
javascript 二維排序表格代碼
目前一直在學(xué)習(xí)WEB前端的知識(shí)。下面貼出最近完成的一個(gè)可排序表格.
2010-12-12
js使用cookie記錄用戶名的方法
這篇文章主要介紹了js使用cookie記錄用戶名的方法,通過完整實(shí)例形式分析了JavaScript針對(duì)cookie的創(chuàng)建、賦值及刪除等操作技巧,以及通過cookie記錄用戶登錄信息的方法,需要的朋友可以參考下
2015-11-11
JavaScript實(shí)現(xiàn)頁面無操作倒計(jì)時(shí)退出
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁面無操作倒計(jì)時(shí)退出,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
JS實(shí)現(xiàn)的簡(jiǎn)單輪播圖運(yùn)動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單輪播圖運(yùn)動(dòng)效果,結(jié)合完整實(shí)例形式分析了javascript基于定時(shí)器動(dòng)態(tài)修改頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
2016-12-12
根據(jù)表格中的某一列進(jìn)行排序的javascript代碼
根據(jù)表格中的某一列進(jìn)行排序的實(shí)現(xiàn)方法有很多，下面為大家介紹下如何使用js來簡(jiǎn)單實(shí)現(xiàn)下，需要的朋友不要錯(cuò)過
2013-11-11