现在的位置: 首页 > 综合 > 正文

层随鼠标移动

2014年10月23日 ⁄ 综合 ⁄ 共 2425字 ⁄ 字号 评论关闭

<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 onmouseover="initMouseMove()">ssssssssssss</li>
<li onmouseover="initMouseMove()">ssssssssssss</li>
<li onmouseover="initMouseMove()">ssssssssssss</li>
<li onmouseover="initMouseMove()">ssssssssssss</li>
<li onmouseover="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;" onmousemove="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;
}



抱歉!评论已关闭.