js学习笔记（三大家族—scroll家族）

最新推荐文章于 2023-01-08 15:02:07 发布

甜甜今天学了吗

最新推荐文章于 2023-01-08 15:02:07 发布

阅读量187

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/dawanhjiao/article/details/105465529

版权

严格模式和怪异模式

1.概念
（1）怪异模式

早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式被我们称为怪异模式。
（2）严格模式
但随着W3C的标准越来越重要，众多的浏览器开始依照W3C的标准来解析css，依照W3C标准解析css的模式被我们称为严格模式。
2.判断模式
通过document.compatMode判断
（1）输出BackCompat为怪异模式
（2）输出CSS1Compat为严格模式

scroll家族

1.概念
（1）网页正文全文宽
（2）网页正文全文高
（3）网页被卷去的高
（4）网页被卷去的左
在这里插入图片描述

<script>
    window.onscroll = function (ev) {//当窗口开始滚动时
        console.log(document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset);//兼容的写法
    }
</script>

2.适配
3.scrollTo(x,y)
（1）作用：把内容滚动到指定坐标
（2）格式：scrollTo(x,y)
x必需：要在窗口文档显示区左上角显示的文档的x坐标
y必需：要在窗口文档显示区左上角显示的文档的y坐标

JSON

1.概念
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于ECMScript的一个子集，相比于HTML，json更易于编写和阅读，同时也更易于机器解析和生成，目前数据传递基本上都是用json。
2.组成
JSON有两大结构：对象和数组。两种结构相互组合从而形成各种复杂的数据结构。
3.测试接口

JSON封装Scroll

<script>
    function scroll() {
        if (window.pageYOffset !== null){
            return {
                "top": window.pageYOffset,
                "left":window.pageYOffset
            };
        }
        else if (document.compatMode === "CSS1Compat"){
            return {
                "top": document.documentElement.scrollTop,
                "left":document.documentElement.scrollLeft
            };
        }
        else{
            return {
                "top": document.body.scrollTop,
                "left":document.body.scrollLeft
            };
        }
    }
    window.addEventListener('scroll',function (ev) {
        console.log(scroll().top);
    })
</script>

vertical-align 属性设置一个元素的垂直对齐方式。
vertical-align：top;把元素的顶端与行中最高元素的顶端对齐

瀑布流特效

页面一直向下滚（人文手动），可以滚很久。
1.特点
（1）等宽
（2）第二行的第一个盒子是在第一行最矮的盒子后面，依次类推。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" href="瀑布流.css">
</head>
<body>
<div id="main">
    <div class="box"><div class="pic"><img src="image/img01.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img02.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img03.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img04.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img05.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img06.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img07.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img08.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img09.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img10(1).jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img11(1).jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img12(1).jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img13(1).jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img14(1).jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img15(1).jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img16(1).jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img17(1).jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img18.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img19.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img20.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img21.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img22.jpg"></div></div>
    <div class="box"><div class="pic"><img src="image/img23.jpg"></div></div>
</div>
<script src="../工具/Tool.js"></script>
<script src="瀑布流.js"></script>
<script src="undrescore.js"></script>
</body>
</html>

甜甜今天学了吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记（三大家族—scroll家族）

严格模式和怪异模式1.概念（1）怪异模式早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式被我们称为怪异模式。（2）严格模式但随着W3C的标准越来越重要，众多的浏览器开始依照W3C的标准来解析css，依照W3C标准解析css的模式被我们称为严格模式。2.判断模式通过document.compatMode判断（1）输出Back...
复制链接

扫一扫