css基础--位移和定位2（鼠标位置，滚动条位置）

最新推荐文章于 2024-09-11 09:01:19 发布

wenmin1987

最新推荐文章于 2024-09-11 09:01:19 发布

阅读量2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/wenmin1987/article/details/91358661

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

获取鼠标指针的页面位置 e.pageX||e.clientX

获取鼠标指针在元素内的位置 e.offsetX||e.layerX

获取滚动条的位置 self.pageXOffset||(document.documentElement&&document.documentElement.scrollLeft)||document.body.scrollLeft

设置滚动条的位置 window.scrollTo(x,y)

<body style="width:200px;height: 200px;">
       <textarea id="t" rows="15" cols="4" style="position: fixed;   left:50px;top：50px;"></textarea>

       <script type="text/javascript">
           //1.获取鼠标指针的页面位置
           function getMP(e){//e表示当前事件对象，由系统自动捕获
               var e=e||window.event;
               return {//e.pageX兼容Safari e.clientX兼容IE（标准和怪异）
                   x:e.pageX||e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft),
                   y:e.pageY||e.clientY+(document.documentElement.scrollTop||document.body.scrollTop)
               }
           }

           var t=document.getElementById("t");
           document.οnmοusemοve=function(e){
               var m=getMP(e);
               t.value="mouseX="+m.x+"\n"+"mouseY="+m.y
           }
           //2.获取鼠标指针在元素内的位置
           function getME(e,o){//e表示当前事件对象，由系统自动捕获 o表示当前元素
               var e = e||window.event;
               return {
                   x:e.offsetX||(e.layerX-o.offsetLeft),
                   y:e.offsetY||(e.layerY-o.offsetTop)
               }
           }
兼容Mozilla浏览器，通过鼠标偏移坐标减去元素的偏移坐标，得到元素内鼠标偏移坐标的参考原点元素边框外壁的左上角

兼容Safari浏览器的offsetX,offsetY是以元素边框外壁的左上角为坐标原点，而其他浏览器则以元素边框内壁的左上角为坐标原点，这导致不同浏览器的解析差异
           //2.2完善获取鼠标指针在元素内的位置
           function getStyle(e,n){//e表示元素，n表示属性名，如“width”、“borderColor”
               if(e.style[n]){//若果在style中显示定义
                   return e.style[n];
                   }else if(e.currentStyle){//否则，在IE
                       return e.currentStyle[n]
                   }else if(document.defaultView&&document.defaultView.getComputedStyle){//非ie(DOM标准)
                       n=n.replace(/([A-Z])/g,"-$1");//转换参数的属性名 borderColor--> border-Color
                       n=n.toLocaleLowerCase();//border-Color-->border-color
                       var s= document.defaultView.getComputedStyle(e,null);
                       if(s){
                           return s.getPropertyValue(n)
                       }
                   }else{
                       return null;//如果不支持，返回null
                   }
           }

           function getME(e,o){//e表示当前事件对象，o表示当前元素
               var e=e||window.event;
               //获取元素左侧边框的宽度，边框默认时为3px
               var bl=parseInt(getStyle(o,"borderLeftWidth"))||((o.style.borderLeftStyle&&o.borderLeftStyle!="none")?3:0)
               //获取元素顶部边框的宽度，
               var bt=parseInt(getStyle(o,"borderTopWidth"))||((o.style.borderTopStyle&&o.borderTopStyle!="none")?3:0)
//e.offsetX为一般浏览器,e.layerX为早期的Mozilla浏览器

var x=e.offsetX||(e.layerX-o.offsetLeft-bl);//兼容Mozilla类型浏览器，减去边框宽度
           var y=e.offsetY||(e.layerY-o.offsetTop-bt);
           var u=navigator.userAgent;//获取浏览器的用户数据
           if((u.indexOf("KHTML")>-1)||(u.indexOf("Konqueror")>-1)||(u.indexOf("AppleWebKit")>-1)){
               x-=bl;//如果是Safari浏览器，则减去边框的影响
               y-=bt;
           }
           return {//返回兼容不同浏览器的鼠标位置对象，以元素边框内壁左上角为定位原点
               x:x,
               y:y
           }
           }

       //3.获取页面滚动条的位置
       function getPS(){
           var h=document.documentElement;
           var x=self.pageXOffset||(h&&h.scrollLeft)||document.body.scrollLeft;
           var y=self.pageYOffset||(h&&h.scrollTop)||document.body.scrollTop;
           return {
               y:y,
               x:x
           };
       }
       //3.2设置滚动条的位置window.scrollTo(x,y)
       function getPoint(ele){//获取指定元素距离左上角偏移坐标
               var x=y=0;//初始化临时变量
               while(ele.offsetParent){
                   x+=ele.offsetLeft;//累计总的x轴偏移距离
                   y+=ele.offsetTop;//累计总的y轴偏移距离
                   ele=ele.offsetParent;//把当前元素的offsetParent属性值传递给循环条件表达式
               }
               return {//遍历到body元素后，没有offsetParent属性，循环停止，把叠加的值赋值给对象直接量，并返回该对象
                   "x":x,
                   "y":y
               }
           }
       function setPS(ele){
           window.scrollTo(getPoint(ele).x,getPoint(ele).y);
       }
       </script>
   </body>