鼠標移到div,浮層顯示明細,彈出層與div的上邊距左邊距重合(示例代碼)
更新時間：2013年12月14日 09:25:39 作者：
這篇文章主要介紹了鼠標移到div,浮層顯示明細,彈出層與div的上邊距左邊距重合的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
如下所示：
復制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.toopTip
{
background-color:Yellow;
border-style:solid;
border-width:1px;
border-color:Red;
}
</style>
<script language="javascript" type="text/javascript">
/*
如果希望提示的div的左邊界與上邊界與顯示的div重疊，那么需要刪除文檔頭W3C標準
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*/
function initEvent() {
var divArray = document.getElementsByTagName("div");
for (var i = 0; i < divArray.length; i++) {
divArray[i].onmouseover = createDivDetailOne;
/*
無法用原始的div綁定鼠標移走的事件,因為明細的div的寬度長度都要大于原始div，
這樣原始的div就被覆蓋了，此時會自動觸發(fā)onmouseout事件
*/
//divArray[i].onmouseout = removeDivDetail;
}
}
function createDivDetailOne() {
//保證divDetail div的唯一性
var divDetail = document.getElementById("divDetail");
if(divDetail)
{
document.body.removeChild(divDetail);
}
divObj = document.createElement("div");
divObj.className = "toopTip";
divObj.setAttribute("id", "divDetail");
divObj.style.position = "absolute";
divObj.style.width = "200px";
divObj.style.height = "100px";
var triggerObj = window.event.srcElement;
divObj.style.top = triggerObj.offsetTop;
divObj.style.left = triggerObj.offsetLeft;
divObj.innerHTML = triggerObj.innerText;
document.body.appendChild(divObj);
//此時用于明細的div已經(jīng)覆蓋了原div，所以覆蓋的div要進行事件的處理
document.getElementById("divDetail").onmouseout = function() {
divObj = this;
if (!divObj) {
return;
}
document.body.removeChild(divObj);
};
}
function removeDivDetail() {
var divObj = document.getElementById("divDetail");
if (!divObj) {
return;
}
document.body.removeChild(divObj);
}
window.onload = initEvent;
</script>
</head>
<body>
<div id="divOne" style="background-color: Fuchsia; width: 100px; height: 100px;" >
Hello My Js World!
</div>
<div id="divTwo" style="background-color: Aqua; width: 100px; height: 100px">
Welcome to My Js World!
</div>
<div id="divThree" style="background-color: Gray; width: 100px; height: 100px">
THIS IS My Js World!
</div>
</body>
</html>
相關文章
React Native JSI實現(xiàn)RN與原生通信的示例代碼
本文主要介紹了React Native JSI實現(xiàn)RN與原生通信的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
javascript html5 canvas實現(xiàn)可拖動省份的中國地圖
這篇文章主要介紹了javascript html5 canvas實現(xiàn)可拖動省份的中國地圖的相關資料,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了如何實現(xiàn)有趣的bootstrap走動進度條,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JS給按鈕添加跳轉功能類似a標簽,需要的朋友可以參考下2017-05-05
2009-09-09
js函數(shù)獲取html中className所在的內(nèi)容并去除標簽
本文為大家介紹下如何使用js函數(shù)獲取html中className所在的內(nèi)容，具體實現(xiàn)思路如下，喜歡的朋友可以參考下2013-09-09
微信小程序實現(xiàn)循環(huán)嵌套數(shù)據(jù)選擇
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)循環(huán)嵌套數(shù)據(jù)選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript避免代碼的重復執(zhí)行經(jīng)驗技巧分享
經(jīng)常會發(fā)現(xiàn)一個問題，那就是重復的代碼執(zhí)行，下面就是一些在查看它們的源代碼時發(fā)現(xiàn)一些問題，把這些分享給大家，希望能讓你們更加簡潔高效的寫出JavaScript代碼2014-04-04
最近經(jīng)常要用tab標簽頁，于是就寫了一個簡單的tab標簽頁，純css+js寫的，帶樣式。大家可以參考下2014-01-01
下面小編就為大家?guī)硪黄獰o縫滾動的簡單實現(xiàn)代碼(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06