讓div層隨鼠標移動的實現(xiàn)代碼 ie ff
更新時間：2009年12月18日 01:59:13 作者：
隨鼠標移動的div層使用ie ff ，大家可以注意下兼容性的問題。
.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>
function IsIE() {
var OsObject = "";
if (navigator.userAgent.indexOf("MSIE") > 0) {
return true;
}
}
function mouseMove(ev) {
/*ie 與ff的event 機制不同*/
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;
{
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>
復制代碼 代碼如下:
function IsIE() {
var OsObject = "";
if (navigator.userAgent.indexOf("MSIE") > 0) {
return true;
}
}
function mouseMove(ev) {
/*ie 與ff的event 機制不同*/
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;
相關文章
這篇文章主要為大家詳細介紹了原生js實現(xiàn)簡易抽獎系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了js,jq,css多方面實現(xiàn)簡易下拉菜單功能,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了JS動態(tài)增刪表格行的方法,涉及JavaScript針對表格元素動態(tài)操作相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)左右滾動電影畫布，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
js簡單實現(xiàn)Select互換數(shù)據(jù)的方法
這篇文章主要介紹了js簡單實現(xiàn)Select互換數(shù)據(jù)的方法,涉及javascript動態(tài)操作select中option節(jié)點的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
使用Javascript開發(fā)sliding-nav帶滑動條效果的導航插件
這篇文章主要介紹了使用Javascript開發(fā)sliding-nav帶滑動條效果的導航插件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
查詢條件清空將input、select的值清空，下面有個不錯的示例，需要的朋友可以了解下2014-01-01
http頭部字段Origin和Access-Control-Allow-Origin解決請求跨域
這篇文章主要為大家介紹了http頭部字段Origin和Access-Control-Allow-Origin解決請求跨域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要為大家介紹了javaScript中FormData使用方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家詳細介紹了使用JavaScript將圖像轉換為黑白二值圖的兩種方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01