js-放大镜案例基础知识

小灰灰 2022-03-12 11:26 274阅读 0赞

# 一、offset系列 #

1:无定位的情况下 所有元素均已浏览器左上角为参考  offset系列  
    //offsetWidth = width+border\*2+padding\*2  
    //offsetHeight= height+border\*2+padding\*2  
    //offsetLeft    
    //offsetTop  
    //offsetparent 返回元素 对象 当前元素离他最近的父级元素（必须有定位）

2:当有定位的情况下  当前元素或会找离他最近的父级元素为参考  最终直到找到body  
    /\*父盒子距离他父亲左边界以及上边界的值   \*/  
    console.log('父盒子上边界'+fa.offsetTop,'父盒子左边界'+fa.offsetLeft)  
    /\*子盒子距离他父亲左边界以及上边界的值\*/  
    console.log('孩子的上边界'+child.offsetTop,'子盒子左边界'+child.offsetLeft)

**二、client系列**

document.onmousemove = function(e){

e为事件参数 保存当前事件的详细信息 例如事件对象、事件类型，如果是鼠标事件则e中有两个值 就是

鼠标横纵坐标值 分别为e.clientX e.clientY

}

# 三、scroll系列 #

var box = document.getElementById('box');  
console.log(box.scrollLeft)  
console.log(box.scrollTop)  
console.log(box.scrollWidth)  
console.log(box.scrollHeight)

# 四、案例：通过设置鼠标值实现对应图片的移动 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            img{
                position: relative;
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body>
    <img src="images/图片3.jpg" alt="" style="left: 0 ; top: 0">
    <script>
        window.onload = function () {
            /*
            * 图片随着鼠标的动  --》位置值
            * client  鼠标位置值 ---。事件函数里面有一个参数 （保存事件的具体信息）
             * 事件对象：document ---》 可视窗 口 类型： 移动 onmousemove
              *
              * */
            var img = document.getElementsByTagName('img')[0];
            document.onmousemove = function (e) {
                /*数字类型 整数*/
                console.log(e.clientX,e.clientY);
                img.style.left = e.clientX-150 + 'px';
                img.style.top = e.clientY - 150 + 'px';
            }
        }
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70][]

如图所示，最终图片会跟随鼠标移动而移动

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70]: /images/20220312/656527c3dd8948d1bd5d89df12f0b4c8.png