元素滚动scroll、动画函数封装

最新推荐文章于 2024-05-31 14:44:29 发布

春花.

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量124

点赞数

分类专栏：学习日志文章标签： css html css3

本文链接：https://blog.csdn.net/smile__w/article/details/128064711

版权

学习日志专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1元素滚动scroll系列

1.1 scroll概述

我们使用scroll系列的相关属性可以动态得到该元素的大小、滚动距离等。
在这里插入图片描述

1.2页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上被隐藏掉的高度，我们就成为页面被卷去的头部，滚动条在滚动时会触发onscroll事件。

1.3 仿淘宝固定右侧侧边栏

<div class="slider-bar">
    <span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
    //获取banner和侧边元素
    let slider_bar = document.querySelector('.slider-bar')
    let banner = document.querySelector('.banner')

    //banner距离窗口顶端数值
    let bannerTop = banner.offsetTop

    //slider_bar距离窗口顶端数值
    let slider_barTop = slider_bar.offsetTop

    //侧边栏固定后距离顶端的数值
    let sliderbarTop = slider_bar.offsetTop - bannerTop

    let main = document.querySelector('.main')

    //主体距离窗口顶端的数值
    let mainTop = main.offsetTop

    let goBack = document.querySelector('.goBack')

    document.addEventListener('scroll', function () {
        //被卷入部分超过banner距离窗口顶端数值
        // window.pageYOffset 页面被卷去的头部
        if (window.pageYOffset >= bannerTop) {
            slider_bar.style.position = 'fixed'
            slider_bar.style.top = sliderbarTop + 'px'
        } else {
            slider_bar.style.position = 'absolute'
            slider_bar.style.top = '300px'
        }
        if(window.pageYOffset >= mainTop){
            goBack.style.display = 'block'
        }else{
            goBack.style.display = 'none'
        }
    })
</script>

2 三大系列总结

在这里插入图片描述

3mouseenter和mouseover的区别

mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发。

4 动画函数封装

4.1动画实现原理

实现步骤
1、获得盒子当前位置
2、让盒子在当前位置加上1个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意此元素需要添加定位。才能使用element.style.left

<div></div>

<script>
    let div = document.querySelector('div')

    let time = setInterval(function(){
        if(div.offsetLeft>=500){
            clearInterval(time)
        }
        div.style.left = div.offsetLeft + 1 + 'px'
    },10)
</script>

4.2 动画函数给不同元素记录不同定时器

function animate(obj, target) {
        // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
        // 解决方案就是 让我们元素只有一个定时器执行
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            if (obj.offsetLeft >= target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + 1 + 'px';

        }, 30);
    }