js进阶--js盒子模型08

最新推荐文章于 2021-09-09 18:12:44 发布

cuishoulong3424

最新推荐文章于 2021-09-09 18:12:44 发布

阅读量146

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/cuishoulong3424/article/details/110935554

版权

文章目录

js盒子模型

描述当前盒子的大小分四类共13个
只读属性 clientWidth clientHeight clientLeft clientTop offsetWidth offsetHeight offsetLeft offsetTop offsetParent scrollWidth scrollHeight

client开头的

作用:
获取当前盒子的可视宽高,(width+左右padding/height+上下padding),
获取当前盒子左,上边框的高度(左border/上border)

返回值是数字没有单位，如果是小数，会向上取整,变成整数,内容是否溢出对其没有影响
具体属性:
clientWidth clientHeight clientLeft clientTop

offset开头的

作用：

获取当前盒子的总宽高(在clientWidth/Height的基础上加左右border或上下border)
获取当前盒子的左/上偏移量(当前盒子最左边边框/最上边边框距离父级参照物(父级参照物是谁要取决于当前参照物所有父级谁有position,如果都没有就是body,如果有多个就看谁离得近)的左边内边框距离/上边内边框距离)
body的父级参照物是null
offsetParent当前盒子父级参照物

具体属性:
offsetWidth offsetHeight offsetLeft offsetTop offsetParent

scroll开头的

作用:
获取当前元素的真实宽高(如果当前盒子的内容没有溢出，那就和clientWidth/clientHeight相等)，如果溢出了就等于左padding/上padding+内容的真实宽度/高度
注意 如果当前盒子设置了overflow:hidden,那scrollWidth/scrollHeight就等于左右padding/上下padding+溢出内容的真宽度/实高度
scrollTop获取和设置页面纵向滚动条距离顶部的距离,他可以为小数,顶部为0
scrollLeft获取和设置页面横向滚动条距离左边的距离,他可以为小数,最左边为0

scrollWidth scrollHeight scrollLeft scrollTop

获取样式

getComputedStyle(ele)
ele.currentStyle

获取当前浏览器的可视宽高

     let winH=document.documentElement.clientHeight||document.body.clientHeight;
     let winW=document.documentElement.clientWidth||document.body.clientWidth;

封装一个函数，获取当前的盒子到body的offsetLeft和offsetTop

    function offset(ele) {
        let left = ele.offsetLeft;
        let top = ele.offsetTop;
        let parent = ele.offsetParent;
        while (parent) {
            left += (parent.offsetLeft + parent.clientLeft);
            top += (parent.offsetTop + parent.clientTop);
            parent = parent.offsetParent;
        }
        return {
            left,
            top
        }
    }
    let bodyLeft = offset(box);

js实现盒子水平居中

//utils	
let utils = (function () {
    function offset(ele) {
        let left = ele.offsetLeft;
        let top = ele.offsetTop;
        let parent = ele.offsetParent;
        while (parent) {
            left += (parent.offsetLeft + parent.clientLeft);
            top += (parent.offsetTop + parent.clientTop);
            parent = parent.offsetParent;
        }
        return {
            left,
            top
        }
    }
    //封装一个方法专门用来设置或者浏览器的某些属性
    function win(attr,value){
        if(value===undefined){
            return document.documentElement[attr]||document.body[attr];
        }
        document.documentElement[attr]=value;
        document.body[attr]=value;
    }
    return {
        offset,win
    }
})()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            background: red;
        }

        /* 1 */
        /* #box{
            position: absolute;
            left:50%;
            top:50%;
            margin-top: -100px;
            margin-left: -100px;
        } */

        /* 2 */
        /* #box{
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
        } */

        /* 3 */
        /* #box{
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            margin:auto;
        } */

        /* 4 */
        /* body{
            height:600px;
            display:flex;
            justify-content:center;
            align-items:center;
            background:black;
        } */
    </style>
</head>

<body>
    <div id="box"></div>
</body>

</html>
<script src="utils.js"></script>
<script>
    let winW = utils.win("clientWidth");
    let winH = utils.win("clientHeight");
    //利用js给当前元素设置left和top值
    box.style.position = 'absolute';
    box.style.left = (winW - box.offsetWidth) / 2 + "px";
    box.style.top = (winH - box.offsetHeight) / 2 + "px";
</script>

回到顶部

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img:nth-child(n) {
            width: 1920px;
            display: block;
            height: 1080px;
            background: green;
        }

        img:nth-child(2n-1) {
            background: red;
        }

        #back {
            position: fixed;
            bottom: 20px;
            right: 2px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: yellow;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <div id="back">冲</div>
        <img src="" alt="">
    </div>
</body>

</html>
<script src="utils.js"></script>
<script>
    let winH = utils.win("clientHeight"); //当前浏览器可视区域的高
    window.onscroll = function () {
        //onscroll会重复执行，滚动条一动就执行
        //当浏览器滚动条卷曲的高度大于一屏时，显示回到顶部
        let winT = utils.win("scrollTop"); //当前浏览器滚动条距离顶部的距离
        if (winT >= winH) {
            back.style.display = "block";
        } else {
            back.style.display = "none";
        }

    }
    back.onclick = function () {
        let winT = utils.win("scrollTop");
        //分成20份，每次减去一份
        let part = winT / 10;
        let time1 = setInterval(function () {
            winT -= part;
            //赋值
            utils.win("scrollTop", winT);
            if (document.documentElement.scrollTop == 0) {
                clearInterval(time1);
                time1 = null;
            }
        }, 20)
    }
</script>

图片的延迟加载

思路

获取盒子的高和上偏移还有一屏幕的高，这三个是固定的，然后获取纵向滚动条的偏移，这个是活的
当一屏幕的高+滚动条的上偏移>=盒子的高+盒子的上偏移就是页面加载到了，我们让他的图片地址给img的src

方法

新建一个空图片标签 new Image
检查图片的src是否有效，图片.onload后的方法，无效就执行onerror的方法，类似与点击事件,不过是默认判断
window.onscroll是当页面滚动条滚动时，执行方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 580px;
            height: 327px;
            height: 200px;
            margin: 800px auto;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="./img/default.jpg" true-img="./img/1.jpg" alt="">
    </div>
</body>

</html>
<script src="utils.js"></script>
<script>
    // 图片延迟加载 “图片懒加载”
    // 1.结构中，我们用一个盒子包裹着图片（在图片不展示的时候，可以占据着这个位置，并且设置默认的背景图或者背景颜色）
    // 2.最开始，IMG的SRC中不设置任何的图片地址，把图片的真实地址设置给自定义属性TRUE-IMG（最开始不展示图片:可以让图片隐藏）
    // 3.当浏览器窗口完全展示到图片位置的时候，我们再去加载真实图片，并且让其显示出来（第一屏幕中的图片一般都会延迟加载，来等待其它资源先加载完）
    let img = document.querySelectorAll("img")[0];

    function jiazai() {
        console.log(1);
        if (img.flag) {
            return;
        }
        let winH = utils.win("clientHeight"); //一屏幕的高
        let winT = utils.win("scrollTop"); //滚动条上偏移
        let boxH = box.offsetHeight; //盒子的高
        let boxT = utils.offset(box).top; //盒子上偏移
        if (winH + winT >= boxH + boxT) {
            let trueImg = img.getAttribute("true-img");
            let newImg = new Image; //创建一个空的img,如果src地址里的图片加载成功，会执行onload,加载失败执行onerror这是默认的
            newImg.src = trueImg;
            newImg.onload = function () {
                img.src = trueImg;
                img.flag = true;
                img.style.opacity = 0.01;
                let num = Number(img.style.opacity);
                let time1 = setInterval(function () {
                    num += 0.01;
                    img.style.opacity = num;
                    if (num != 1) {
                        clearInterval(time1);
                        time = null;
                    }
                }, 17)
            }
            // newImg.οnerrοr=function(){
            //     img.src="./img/error.jpg"
            // }
        }
    }
    window.onscroll = jiazai;
</script>

cuishoulong3424

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进阶--js盒子模型08

文章目录js盒子模型client开头的offset开头的scroll开头的获取样式回到顶部思路方法js盒子模型描述当前盒子的大小分四类共13个只读属性 clientWidth clientHeight clientLeft clientTop offsetWidth offsetHeight offsetLeft offsetTop offsetParent scrollWidth scrollHeightclient开头的作用:获取当前盒子的可视宽高,(width+左右padding
复制链接

扫一扫