让div层随鼠标移动的实现代码 ie ff


Posted in Javascript onDecember 18, 2009

.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.3water.com/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;
Javascript 相关文章推荐
JavaScript之引用类型介绍
Aug 10 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 #Javascript
javascript 导出数据到Excel(处理table中的元素)
Dec 18 #Javascript
event.srcElement 用法笔记e.target
Dec 18 #Javascript
Javascript document.referrer判断访客来源网址
May 15 #Javascript
Javascript 中介者模式实例
Dec 16 #Javascript
js textarea自动增高并隐藏滚动条
Dec 16 #Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 #Javascript
You might like
Mysql的常用命令
2006/10/09 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
教你php如何实现验证码
2016/01/20 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
网页常用特效代码整理
2006/06/23 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
Jquery ui css framework
2010/06/28 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python实现图片压缩代码实例
2019/08/12 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
红色革命电影观后感
2015/06/18 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书