让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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
webpack中的模式(mode)使用详解
Feb 20 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
PHP面向对象教程之自定义类
2014/06/10 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
vue实例的选项总结
2020/06/09 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
Python入门篇之函数
2014/10/20 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
python 日期操作类代码
2018/05/05 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
创业培训计划书
2014/05/03 职场文书
体育教师求职信
2014/05/24 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
董存瑞观后感
2015/06/11 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL