讓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;
相關(guān)文章
Cropper.js進階之固定寬高圖片裁切實現(xiàn)示例
這篇文章主要為大家介紹了Cropper.js進階之固定寬高圖片裁切實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局（實例代碼）
這篇文章主要介紹了純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)如何使用云函數(shù)生成二維碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
JavaScript用Number方法實現(xiàn)string轉(zhuǎn)int
parseInt方法在format'00'開頭的數(shù)字時會當作2進制轉(zhuǎn)10進制，所以建議string轉(zhuǎn)int最好用Number方法2014-05-05
javascript getElementsByClassName 和js取地址欄參數(shù)
為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個)，我們先來實現(xiàn)一個通過className找DOM節(jié)點的方法：getElementsByClassName。這是對瀏覽器自有DOM方法的一個簡單但實用的擴充。2010-01-01
今天小編就為大家分享一篇layui 設(shè)置table 行的高度方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript實現(xiàn)獲取select下拉框中第一個值的方法
這篇文章主要介紹了JavaScript實現(xiàn)獲取select下拉框中第一個值的方法,涉及javascript針對頁面元素屬性的相關(guān)獲取操作技巧,需要的朋友可以參考下2018-02-02
js中document.getElementByid、document.all和document.layers區(qū)分介紹
document.getElementById 是公共標準，被目前的所有主流瀏覽器支持,document.all只有IE支持,document.layers是Netscape 4.x專有的屬性2011-12-12
javascript不同類型數(shù)據(jù)之間的運算的轉(zhuǎn)換方法
這篇文章主要介紹了javascript不同類型數(shù)據(jù)之間的運算的轉(zhuǎn)換方法,需要的朋友可以參考下2014-02-02
javascript之循環(huán)停頓上下滾動...2007-08-08