zoukankan      html  css  js  c++  java
  • JavaScript获取元素的位置(受分辨率影响)的替代函数

    不知道是受分辨率影响,还是在分辨率影响下,页面出现滚动条时,拖动了滚动条导致scroll值发生改变的影响。

     替代函数来自:http://www.cnblogs.com/Caceolod/articles/1312357.html

      1 /*
      2   获取某个元素的位置
      3   @obj 该元素的DOM对象,或该元素的ID
      4 */
      5 /* 
      6 下列这个函数虽然能获取到元素的位置,但是在分辨率不同的情况下,位置会不一致。
      7 function getObjectPosition(obj)
      8 {
      9   obj=typeof obj==='string'?getElement(obj):obj;
     10   if(!obj)
     11   {
     12     return;
     13   }  
     14   var position='';
     15   if(obj.getBoundingClientRect) //For IEs
     16   {
     17     position=obj.getBoundingClientRect();
     18     return {x:position.left,y:position.top};
     19   }
     20   else if(document.getBoxObjectFor)
     21   {
     22     position=document.getBoxObjectFor(obj);
     23     return {x:position.x,y:position.y};
     24   }
     25   else
     26   {
     27     position={x:obj.offsetLeft,y:obj.offsetTop};
     28     var parent=obj.offsetParent;
     29     while(parent)
     30     {
     31        position.x+=obj.offsetLeft;
     32        position.y+=obj.offsetTop;
     33        parent=obj.offsetParent;
     34     }
     35     return position;
     36   }
     37 }
     38 */
     39  function getObjectPosition(obj)
     40 {
     41     var ua = navigator.userAgent.toLowerCase();
     42     var isOpera = (ua.indexOf('opera'!= -1);
     43     var isIE = (ua.indexOf('msie'!= -1 && !isOpera); 
     44     var el=typeof obj==='string'?getElement(obj):obj;    
     45     if(el.parentNode === null || el.style.display == 'none'
     46     {
     47         return false;
     48     }         
     49     var parent = null;
     50     var pos = [];     
     51     var box;         
     52     if(el.getBoundingClientRect)    //IE
     53     {         
     54         box = el.getBoundingClientRect();
     55         var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
     56         var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
     57         return {x:box.left + scrollLeft, y:box.top + scrollTop};
     58     }
     59     else if(document.getBoxObjectFor)       
     60     {
     61         box = document.getBoxObjectFor(el); 
     62         var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0
     63         var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0
     64         pos = [box.x - borderLeft, box.y - borderTop];
     65     }
     66     else  
     67     {
     68         pos = [el.offsetLeft, el.offsetTop];  
     69         parent = el.offsetParent;  
     70        
     71         while (parent) 
     72         {  
     73             pos[0+= parent.offsetLeft; 
     74             pos[1+= parent.offsetTop; 
     75             parent = parent.offsetParent;
     76         }  
     77   
     78         if (ua.indexOf('opera'!= -1 || ( ua.indexOf('safari'!= -1 && el.style.position == 'absolute' )) 
     79         { 
     80             pos[0-= document.body.offsetLeft;
     81             pos[1-= document.body.offsetTop;         
     82         }    
     83     } 
     84                  
     85     if (el.parentNode) 
     86     { 
     87         parent = el.parentNode;
     88     } 
     89     else 
     90     {
     91         parent = null;
     92     }
     93     
     94     while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML'
     95     { 
     96         pos[0-= parent.scrollLeft;
     97         pos[1-= parent.scrollTop;
     98         
     99         if (parent.parentNode) 
    100         {
    101             parent = parent.parentNode;
    102         } 
    103         else 
    104         {
    105             parent = null;
    106         }
    107     }
    108     
    109     return {x:pos[0], y:pos[1]};
    110 }
    <h3>
       心静似高山流水不动,心清若巫峰雾气不沾。
    </h3>
  • 相关阅读:
    Spark概念介绍
    KVM web管理工具——WebVirtMgr(一)
    Spark集群搭建
    阿里云DTS VS MySQLdump
    MySQL性能分析和优化-part 1
    为什么logstash进程的CPU使用率100%?
    技本功丨互联网+工业视觉异常检测分析
    Spark集群管理器介绍
    某云下系统上云方案及成本计算
    企业混合云架构设计
  • 原文地址:https://www.cnblogs.com/McJeremy/p/1517698.html
Copyright © 2011-2022 走看看