【转】clientX,pageX,screenX，offsetLeft，scrollTop


这个东西，以为理解了，今天彻底弄弄。
clientX
观点：鼠标相对于WINDOWS的坐标。
这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height
证明：点击获得clientX,clientY的大小，设置为图片定位的位置。
如果上面观点不成立，也就是这个坐标不是浏览器范围内的，例如是相对DOCUMENT的，那么鼠标在很远处点击的时候，你会看到图片跑到鼠标点击的地方，事实上，它起码会保持在浏览器的边上。所以观点成立！
通过下面例子说明，鼠标点击获得
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 *{ margin:0; padding:0;}
 html{ width:3000px;}
 #img{ position:absolute;}
</style>
</head>
<body>
111
<img id = 'img' src="images_photo/1.jpg" width="200" height="150" alt=" " />
<script type="text/javascript">
var oImg = document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x_x_x_x('img');
document.onclick = function(e){
    e = e || event;
    x = e.clientX;
    y = e.clientY;
    oImg.style.left = x + 'px';
    oImg.style.top = y + 'px';
    }
</script>
</body>
</html>
当我们移动鼠标到滚动条很远的位置时，你会发现你的操作将会像是个遥控器一般，操作的位置也不断改变，但是始终不能突破滚动条最左边时候，最右边的点的那个点，而且你会发现当你此时刻鼠标点到最右边的时候，具体图片位置停留在第一屏时候的最右远点，当你往回，距离滚动条此刻位置浏览器窗口右边100PX时候，图片也往回走了100px。这就是这个属性的秘密吧！
pageX
这个东西是相对于DOCUMENT的。只是IE678不支持，IE9支持！
例子如下：
上面的代码稍微改一下：   
    x = e.pageX;
    y = e.pageY;
screenX
相对于屏幕的，虽然没多大用吧!
同样可以修改代码：
    x = e.screenX;
    y = e.screenY;
offsetLeft
这个是表示对象定位的坐标，而非鼠标事件的坐标！
如果设置定位非STATIC的元素，那么就是相对于他们的位置！而应该注意也不全是定位的距离，而是物体offsetWidth的周围起，也就是说要加上左外边距的距离！
例子如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 *{ margin:0; padding:0;}
 html{}
 #img{ position:absolute;}
</style>
</head>
<body>
<div style="position:absolute; left:200px; width:500px; height:500px; margin:0 auto; background-color:red;">
111
<img id = 'img' src="images_photo/1.jpg" width="200" height="150" alt=" " />
<div>
<script type="text/javascript">
var oImg = document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x('img');
var style = oImg.style;
document.onclick = function(e){
    e = e || event;
    x = e.clientX;
    y = e.clientY;
    oImg.style.left = 100 + 'px';
    oImg.style.top = y + 'px';
    alert(oImg.offsetLeft);
    }
</script>
</body>
</html>
clientLeft
表示从内边距起，到元素自身的offsetLeft的终点位置或者说是起点的位置，取决于你是从左往右算，还是从右往左算。那么就是到滚动条，或者边框的地方。其实我想寻找到滚动条的位置，于是设置了左边框，但是突然发现只有LEFT而没有RIGHT，所以这种情况不会出现，所以应该能说明，就是边框的距离！
看看这个例子：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 *{ margin:0; padding:0;}
 html{}
 #img{ position:absolute; margin-left:10px; border-left:10px solid #fff; padding-left:10px;}
</style>
</head>
<body>
<div style="position:absolute; left:200px; width:500px; height:500px; margin:0 auto; background-color:red;">
111
<img id = 'img' src="images_photo/1.jpg" width="200" height="150" alt=" " />
<div>
<script type="text/javascript">
var oImg = document.getElementByIdx_x_x_x_x_x_x_x_x_x_x('img');
var style = oImg.style;
document.onclick = function(e){
    e = e || event;
    x = e.clientX;
    y = e.clientY;
    oImg.style.left = 100 + 'px';
    oImg.style.top = y + 'px';
    alert(oImg.clientLeft);
    }
</script>
</body>
scrollTop
给出元素已经滚动的距离（像素值）。当你设置这些属性的时候，页面滚动到新坐标。
解释：像素值表示这个值的单位是px。如果你设置值为100px，那么不会生效，因为值的单位已经有默认了，你只需要用‘100’。
layerX\offsetX
不被所有浏览器支持。只在你想要取得一个元素相对于它的绝对定位的父元素的位置时有用处。
var x = [the element];
var pos = x.layerX || x.offsetX;







==================================原文链接===此文章由博客转发小工具转发==================================
posted @ 2015-01-08 13:03  农码一生  阅读(289)  评论(0)  编辑  收藏  举报
.