让div层随鼠标移动的实现代码 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="" />数据更新中...</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实现购物车

    原生js实现购物车

    这篇文章主要为大家详细介绍了原生js实现购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS 动态获取节点代码innerHTML分析 [IE,FF]

    JS 动态获取节点代码innerHTML分析 [IE,FF]

    在IE 环境下 赋值类型为对象时 innerHTML 获取不到其改变,在FireFox环境下 .属性 方式获取不到其改变。
    2009-11-11
  • bootstrap fileinput完整实例分享

    bootstrap fileinput完整实例分享

    这篇文章主要为大家分享文件上传组件bootstrap fileinput完整实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JS实现下拉框的动态添加(附效果)

    JS实现下拉框的动态添加(附效果)

    页面初加载时:选择车类型后:选择车颜色后:JS实现下拉框的动态添加,网页代码如下:动态添加下拉框 车类型:请选择宝马、奔驰 车颜色
    2013-04-04
  • 在微信小程序中使用图表的方法示例

    在微信小程序中使用图表的方法示例

    这篇文章主要介绍了在微信小程序中使用图表的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 微信页面倒计时代码(解决safari不兼容date的问题)

    微信页面倒计时代码(解决safari不兼容date的问题)

    本文主要分享了微信页面倒计时代码(pc端),并在文章结尾分析了safari不兼容date的原因以及解决方法,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JavaScript登录验证码的实现

    JavaScript登录验证码的实现

    验证码功能真的无处不在,为了提高网站的安全性,验证码功能是必要的环节,今天小编通过本文给大家分享js登录验证码的实现,感兴趣的朋友跟着小编一起学习吧
    2016-10-10
  • DOM操作原生js 的bug,使用jQuery 可以消除的解决方法

    DOM操作原生js 的bug,使用jQuery 可以消除的解决方法

    下面小编就为大家带来一篇DOM操作原生js 的bug,使用jQuery 可以消除的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript中“+”的陷阱深刻理解

    JavaScript中“+”的陷阱深刻理解

    本文将详细介绍JavaScript中“+”的一些错误应用,需要的朋友可以参考下
    2012-12-12
  • 使用VScode 插件debugger for chrome 调试react源码的方法

    使用VScode 插件debugger for chrome 调试react源码的方法

    这篇文章主要介绍了使用VScode 插件debugger for chrome 调试react源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论