让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 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
vue-router 控制路由权限的实现
Sep 24 Javascript
js+cavans实现图片滑块验证
Sep 29 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
PHP5中MVC结构学习
2006/10/09 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
学习python处理python编码问题
2011/03/13 Python
python控制台英汉汉英电子词典
2020/04/23 Python
实例讲解Python中的私有属性
2014/08/21 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
就业协议书范本
2014/04/11 职场文书
五年级学生评语
2014/04/22 职场文书
法人授权委托书范本
2014/09/17 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
闪闪的红星观后感
2015/06/08 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers