当前位置: 代码迷 >> Web前端 >> 获取 body 相对于荧屏的坐标
  详细解决方案

获取 body 相对于荧屏的坐标

热度:582   发布时间:2012-11-22 00:16:41.0
获取 body 相对于屏幕的坐标
获取body相对于屏幕的位置,还是比较郁闷的,下面是本人的方法:

可选择的有screenLeft,screenTop,screenX,screenY,不过由于工具栏高度未知,所以很难计算出body的位置.
ie:window.screenLeft,window.screenTop为body相对于屏幕的位置(或许是html元素),(不用担心高度不定的工具条了)...
opera: 和IE一样, screenX和screenY始终为-4和-23,奇怪...(也不用担心可以随意拖动高度的工具条了)

ff: screenTop无值,screenY为浏览器相对于屏幕的位置...这样要加上工具条高度,(不过工具条高度不一定啊)...因此ff是无解的...

safari和chrome 取到的值也是浏览器在屏幕的位置,也无解

废话不多,上终极方法,就是e.screenX-e.clientX和e.screenY-e.clientY,就能取到body相对于屏幕的偏移,只是,要用户鼠标动一下才能取到值...


<!DOCTYPE html>

<head>


<style>
body,html{
    background: blue;
}
</style>



<script>

function onInit(e){

    var e = e||window.event;
    //除ff
    //alert([window.screenLeft,window.screenTop]);
    //除ie  (不过op取到的值有些怪异)
    //alert([window.screenX,window.screenY]);
    //由于状态栏的不确定,导致下面方法基本是无用的
    //alert([window.outerHeight,window.innerHeight,window.outerHeight-window.innerHeight])
    
    //用事件取值大法
    
    getBodyOffset();

    
}


function getBodyOffset(){
    if(window.attachEvent)
        document.attachEvent("onmousemove",getScreenPx);
    else if(window.addEventListener)
        document.addEventListener("mousemove",getScreenPx,false);
}
function getScreenPx(e){
    var e = window.event||e;
    window.bodyOffset = [e.screenX-e.clientX,e.screenY-e.clientY];
    
}
</script>

</head>

<body onload="onInit(event)">
<div style="width:300px;height:600px;border:1px solid red;"></div>

<input type="button" onclick="alert(window.bodyOffset)" />
</body>

</html>
  相关解决方案