层随鼠标移动

最新推荐文章于 2024-08-09 21:30:00 发布

xiaona1047985204

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： function xhtml javascript html button google

本文链接：https://blog.csdn.net/xiaona1047985204/article/details/6732613

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-1.5.min.js"></script>
<script>
function initMouseMove(){
if(!document.all){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = mouseMove;
}
function mouseMove(e){
var x,y;
if(!document.all){
x=e.pageX;
y=e.pageY;
}else{
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
}
$("#txt").css("left",x);
$("#txt").css("top",y);
}
</script>
<title>get mouse position</title>
</head>
<body>
<ul >
<li οnmοuseοver="initMouseMove()">ssssssssssss</li>
<li οnmοuseοver="initMouseMove()">ssssssssssss</li>
<li οnmοuseοver="initMouseMove()">ssssssssssss</li>
<li οnmοuseοver="initMouseMove()">ssssssssssss</li>
<li οnmοuseοver="initMouseMove()">ssssssssssss</li>

</ul>
<input type="button" id="txt" style="position: absolute;">
</body>

</html>

兼容ie ff 的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>获取鼠标坐标</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.tip {
width:200px;
border:2px solid #ddd;
padding:8px;
background:#f1f1f1;
color:#666;
}

</style>
<script type="text/javascript">
function mousePos(e){
var x,y;
var e = e||window.event;
return {
x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
};
};
function test(e){
document.getElementById("mjs").innerHTML = mousePos(e).x+','+mousePos(e).y;
};
</script>
</head>
<body>
<div id="mjs" class="tip">111</div>
<div id="test" style="width:1000px;height:1000px;background:#ccc;" οnmοusemοve="test(event)"></div>
</body>
</html>

原因：

要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签。

在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop，如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候，请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
    top=document.body.scrollTop;
    left=document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
    top=document.documentElement.scrollTop;
    left=document.documentElement.scrollLeft;
}

xiaona1047985204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
层随鼠标移动

function initMouseMove(){ if(!document.all){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = mouseMove;}funct
复制链接

扫一扫

专栏目录