apis-day5dom网页特效篇

最新推荐文章于 2024-08-22 14:32:34 发布

一束光亮

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量122

点赞数

分类专栏：前端第二阶段js基础、web apis实用案例等文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_52766105/article/details/128205576

版权

前端第二阶段js基础、web apis实用案例等专栏收录该内容

11 篇文章 0 订阅

订阅专栏

apis-day5网页特效篇

文章目录

apis-day5网页特效篇

滚动事件和加载事件

学习目标：

1.能够制作常见的网页特效

2.具备制作常见网页焦点图的能力

目标：掌握新的事件，做更强交互

1.1滚动事件

当页面进行滚动时触发的事件

为什么要学？很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

事件名：scroll

监听整个页面滚动：

//页面滚动事件
window.addEventListener('scoll',function(){
    
})

注：给windows或document添加scoll事件

监听某个元素的内部滚动直接给某个元素加即可

1.2加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

为什么要学？

有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

事件名：load

监听页面所有资源加载完毕

给window添加load事件

//页面加载事件
window.addEventLisener('load',functio(){
                       
                       })

注：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

监听页面DOM加载完毕：给document添加DOMContentLoad事件

document.addEventListener('DOMContentLoaded',function(){
    //执行的操作
})

元素大小和位置

2.1 scroll家族（可读可改）

使用场景：

想要页面滚动一段距离，比如100px，就让某些元素显示隐藏——使用scroll 来检测页面滚动的距离~

获取宽高：

获取元素的内容总宽高（不包含滚动条）返回值不带单位
scrollWidth和scrollHeight

获取位置:

获取元素内容往左、往上滚出去看不到的距离
scrollLeft和scrollTop
这两个属性是可以修改的（赋值）

div.addEventListener('scoll',function(){
    console.log(this.scrollTop)
})

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

//页面滚动事件
window.addEventListener('scroll',function(){
    //获取当前元素被卷去的头部
    let num = document.documentElement.scrollTop
    console.log(num)
})

注：document.documentElement HTML文档返回对象为HTML元素

案例：仿新浪返回顶部

实现需求：

当页面滚动500像素，就显示返回顶部按钮，否则隐藏，同时点击按钮，则返回顶部

分析：

①：用到页面滚动事件

②：检测页面滚动大于等于100像素，则显示按钮

③：点击按钮，则让页面的scrollTop 重置为 0

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .content {
            width: 1000px;
            height: 3000px;
            background-color: pink;
            margin: 0 auto;
        }

        .backtop {
            display: none;
            width: 50px;
            left: 50%;
            margin: 0 0 0 505px;
            position: fixed;
            bottom: 60px;
            z-index: 100;
        }

        .backtop a {
            height: 50px;
            width: 50px;
            background: url(./images/bg2.png) 0 -600px no-repeat;
            opacity: 0.35;
            overflow: hidden;
            display: block;
            text-indent: -999em;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="content"></div>
    <div class="backtop">
        <img src="./images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
        let backtop = document.querySelector('.backtop')
        // 1.页面滚动事件
        window.addEventListener('scroll', function () {
            //2.检测滚动的距离
            let num = document.documentElement.scrollTop
            //3.进行判断显示和隐藏
            if (num >= 500) {
                backtop.style.display = 'block'
            }
            else {
                backtop.style.display = 'none'
            }


        })
        // 一、点击链接返回顶部backtop.children[1]
        backtop.children[1].addEventListener('click', function () {
            // 返回顶部
            // scrollTop可读写
            document.documentElement.scrollTop = 0
        })
    </script>  
</body>

</html>

2.2 offset家族

使用场景：

通过js的方式，得到元素在页面中的位置。这样我们可以做，页面滚动到这个位置，就可以返回顶部的小盒子显示…

获取宽高：

获取元素的自身宽高、包含元素自身设置的宽高（内容）、padding、border
offsetWidth和offsetHeight

获取位置：

获取元素距离自己定位父级元素的左、上距离（父级必须有定位，如果都没有，就以文档左上角为准）
offsetLeft和offsetTop 注意是只读属性

案例1：仿京东固定导航栏案例

需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出

分析：

①：用到页面滚动事件

②：检测页面滚动大于等于秒杀模块的位置则滑入，否则滑出

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .content {
            overflow: hidden;
            width: 1000px;
            height: 3000px;
            background-color: pink;
            margin: 0 auto;
        }

        .backtop {
            display: none;
            width: 50px;
            left: 50%;
            margin: 0 0 0 505px;
            position: fixed;
            bottom: 60px;
            z-index: 100;
        }

        .backtop a {
            height: 50px;
            width: 50px;
            background: url(./images/bg2.png) 0 -600px no-repeat;
            opacity: 0.35;
            overflow: hidden;
            display: block;
            text-indent: -999em;
            cursor: pointer;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;
            background-color: purple;
            text-align: center;
            color: #fff;
            line-height: 80px;
            font-size: 30px;
            transition: all .3s;
        }

        .sk {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin-top: 500px;
        }
    </style>
</head>

<body>
    <div class="header">我是顶部导航栏</div>
    <div class="content">
        <div class="sk">秒杀模块</div>
    </div>
    <div class="backtop">
        <img src="./images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
         let header = document.querySelector('.header')
         let sk = document.querySelector('.sk')
        //  1.页面滚动事件
        window.addEventListener('scroll',function(){
            if(document.documentElement.scrollTop>=sk.offsetTop){
                header.style.top='0'
            }else{
                header.style.top='-80px'
            }
        })
    </script>
</body>

</html>

案例2：电梯导航案例

需求：点击可以页面调到指定效果

分析：

①：点击当前小导航，当前添加active，其余移除active

②：得到对应内容的 offsetTop值

③：让页面的 scrollTop 走到对应内容的 offsetTop

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

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

        .aside {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .item {
            height: 40px;
            line-height: 40px;
            text-align: center;
            padding: 0 10px;
            cursor: pointer;
        }

        .active {
            background-color: red;
            color: #fff;
        }

        .content {
            width: 660px;
            margin: 400px auto;
        }

        .neirong {
            height: 300px;
            margin-bottom: 20px;
            color: #fff;
        }

        .content1 {
            background-color: red;
        }

        .content2 {
            background-color: blue;
        }

        .content3 {
            background-color: orange;
        }

        .content4 {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>

    <div class="aside">
        <div class="item active">男装/女装</div>
        <div class="item">儿童服装/游乐园</div>
        <div class="item">电子产品</div>
        <div class="item">电影/美食</div>
    </div>

    <div class="content">
        <div class="neirong content1">男装/女装</div>
        <div class="neirong content2">儿童服装/游乐园</div>
        <div class="neirong content3">电子产品</div>
        <div class="neirong content4">电影/美食</div>
    </div>

    <script>
             // 1.获取元素
             let items = document.querySelectorAll('.item')
             let neirongs=document.querySelectorAll('.neirong')
             //2.左侧asice模块，点击谁，谁高亮
             for(let i = 0;i<items.length;i++){
                items[i].addEventListener('click',function(){
                    // 找到上一个active 移除类
                    document.querySelector('.aside .active').classList.remove('active')
                    // 点击谁，谁添加类
                    this.classList.add('active')
                    // 3.页面滚动，左边点击谁，右边就滚动到哪个位置
                    document.documentElement.scrollTop=neirongs[i].offsetTop
                })
             }

    </script>
</body>

</html>