快捷導(dǎo)航

讓div層隨鼠標(biāo)移動(dòng)的實(shí)現(xiàn)代碼 ie ff

更新時(shí)間：2009年12月18日 01:59:13 作者：

隨鼠標(biāo)移動(dòng)的div層使用ie ff ，大家可以注意下兼容性的問(wèn)題。

.center_div2
{
position: absolute;
z-index: 1;
text-align: center;
display: none;
background-color: #e0e7ef;
}

.center_div_tips2
{
position: relative;
color: Red;
}
<div id="detailDiv" class="center_div2">
<span class="center_div_tips2"><img src="http://img.jb51.net/imgby/loading.gif" alt="" />數(shù)據(jù)更新中...</span>
</div>

復(fù)制代碼代碼如下:

 
function IsIE() { 
var OsObject = ""; 
if (navigator.userAgent.indexOf("MSIE") > 0) { 
return true; 
} 
} 
function mouseMove(ev) { 
/*ie 與ff的event 機(jī)制不同*/ 
ev = ev || window.event; 
var mousePos = mouseCoords(ev); 
var detailDiv = document.getElementById("detailDiv"); //將要彈出的層 
detailDiv.style.left = (mousePos.x + 10) + "px"; 
detailDiv.style.top = (mousePos.y + 18) + "px"; 
} 
function mouseCoords(ev) { 
if (ev.pageX || ev.pageY) { 
return { 
x: ev.pageX, 
y: ev.pageY 
}; 
} 
/*ie 與 ff的邊界 處理不同*/ 
if (IsIE()) { 
return { x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop } 
} 
else { 
return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop } 
} 
} 
document.onkeydown = keydown; 

您可能感興趣的文章:

相關(guān)文章

原生js實(shí)現(xiàn)簡(jiǎn)易抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)易抽獎(jiǎng)系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
js,jq,css多方面實(shí)現(xiàn)簡(jiǎn)易下拉菜單功能
這篇文章主要介紹了js,jq,css多方面實(shí)現(xiàn)簡(jiǎn)易下拉菜單功能,需要的朋友可以參考下
2017-05-05
JS動(dòng)態(tài)增刪表格行的方法
這篇文章主要介紹了JS動(dòng)態(tài)增刪表格行的方法,涉及JavaScript針對(duì)表格元素動(dòng)態(tài)操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-03-03
JavaScript實(shí)現(xiàn)左右滾動(dòng)電影畫(huà)布
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)左右滾動(dòng)電影畫(huà)布，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
js簡(jiǎn)單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法,涉及javascript動(dòng)態(tài)操作select中option節(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
使用Javascript開(kāi)發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件
這篇文章主要介紹了使用Javascript開(kāi)發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03
將查詢條件的input、select清空
查詢條件清空將input、select的值清空，下面有個(gè)不錯(cuò)的示例，需要的朋友可以了解下
2014-01-01
http頭部字段Origin和Access-Control-Allow-Origin解決請(qǐng)求跨域
這篇文章主要為大家介紹了http頭部字段Origin和Access-Control-Allow-Origin解決請(qǐng)求跨域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
javaScript中FormData使用方法示例
這篇文章主要為大家介紹了javaScript中FormData使用方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
使用JavaScript實(shí)現(xiàn)二值化圖像
這篇文章主要為大家詳細(xì)介紹了使用JavaScript將圖像轉(zhuǎn)換為黑白二值圖的兩種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01