JS操作html元素中clientX、offsetX、scree

web.jpeg

我们知道每一个事件都有一个事件处理函数,事件处理函数，都有一个隐藏的参数event

image.png

在日常开发中经常会使用到我上图 标出的一些参数，那么他们有什么区别呢？

• clientX和 clientY 是可视区域的 x,y的坐标

image.png

• offsetX、offsetY 相对于带有定位的父盒子的x，y坐标

image.png

• screenX、screenY 距离当前电脑屏幕的x，y坐标 （屏幕分辨率的宽度计算）

image.png

• pageX、pageY 是相对于整个页面来说，包括了被卷出去的body部分的长度

image.png

放大镜效果

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #cccccc;
            position: relative;
           
        }

        .small {
            position: relative;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            display: none;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #cccccc;
            overflow: hidden;
            display: none;


        }
    </style>

image.png

<script>



    var boxObjc = document.getElementById("box")

    var smallObjc = boxObjc.children[0];

    var bigObjc = boxObjc.children[1];
    var bigImgObjc = bigObjc.children[0];

    var maskObjc = document.getElementById("mask");


    boxObjc.onmouseover = function () {
        maskObjc.style.display = "block";
        bigObjc.style.display = "block";
    };
    boxObjc.onmouseout = function () {
        maskObjc.style.display = "none";
        bigObjc.style.display = "none";
    };

    //获取宽度
    
    smallObjc.onmousemove = function (e) {
      
        e = window.event || e;
       var x = e.clientX - maskObjc.offsetWidth * 0.5 ;
       var y = e.clientY - maskObjc.offsetHeight * 0.5;
       //因为box有一个margin ，所以需要减去
       x = x - 100;
       y = y -100;
       //处理边界
       //上边界和左边界
       x = x < 0 ? 0 : x;
       y = y < 0 ? 0 :y;

       //下边界和左边界
       var maxX = this.offsetWidth - maskObjc.offsetWidth;
       x =  x > maxX ? maxX : x;
       var maxY = this.offsetHeight - maskObjc.offsetHeight;
       y = y > maxY ? maxY : y;
       maskObjc.style.left = x + "px";
       maskObjc.style.top  = y + "px";

      //比例放大
      //大图移动的范围
      var bigMoveMaxX = bigImgObjc.offsetWidth - bigObjc.offsetWidth;
      var bigMoveMaxY = bigImgObjc.offsetHeight - bigObjc.offsetHeight;

      //计算   移动的距离/移动的范围 = 大图移动的距离/大图移动的范围
      var  bigMoveX = x * bigMoveMaxX /(this.offsetWidth - maskObjc.offsetWidth);

      var bigMoveY = y * bigMoveMaxY /(this.offsetHeight - maskObjc.offsetHeight);

      bigImgObjc.style.marginLeft = -bigMoveX + "px";
      bigImgObjc.style.marginTop = - bigMoveY + "px";

        
    };


</script>