Javascript中缓动动画函数实例

最新推荐文章于 2024-06-19 17:56:19 发布

Harry-iu

最新推荐文章于 2024-06-19 17:56:19 发布

阅读量755

点赞数

分类专栏：技术·教程 # JavaScript 文章标签：定位 js css html dom

本文链接：https://blog.csdn.net/www1577791638/article/details/113897373

版权

JavaScript 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

技术·教程

11 篇文章 0 订阅

订阅专栏

scroll系列属性

scrollTop/scrollLeft/ScrollWidth/scrollHeight
overflow:auto 使滑动自动显示
页面被卷去的头部:可以通过window.pageYOffset获得如果是被卷的是左window.pageXoffset
注意，元素被卷去的头部是elent.scollTop ,如果是页面被卷去的头部则是window.pageYoffset

<body>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box1 {
            width: 400px;
            height: 200px;
            background-color: rgb(37, 150, 47);
            margin: 10px auto;

        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: rgb(37, 127, 150);
            margin: 10px auto;
        }

        .box3 {
            width: 400px;
            height: 1000px;
            background-color: rgb(141, 37, 150);
            margin: 10px auto;
        }

        .aside {
            position: absolute;
            width: 50px;
            height: 150px;
            background-color: rgb(141, 133, 26);
            top: 300px;
            right: calc(50% - 250px);
            padding: 10px;
            padding-top: 30px;
            text-align: center;
            border-radius: 10px;
        }
        .aside span{
            display: none;
            cursor: pointer;
        }
    </style>
     <div class="aside"><span>返回顶部</span></div>
    <div class="box1">盒子一</div>
    <div class="box2">盒子二</div>
    <div class="box3">盒子三</div>

    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        var box3 = document.querySelector('.box3');
        var asidese = document.querySelector('.aside');
        var bon = asidese.offsetTop - box2.offsetTop
        document.addEventListener('scroll', function () {
            console.log(box2.offsetTop);
            console.log('aside的距离'+asidese.offsetTop);
            if (pageYOffset >= box2.offsetTop) { 
                asidese.style.position = 'fixed';
                asidese.style.top = bon + 'px'
            }
            else{
                asidese.style.position = 'absolute';
                asidese.style.top = '300px'
            }
            if (pageYOffset >= box3.offsetTop) { 
                asidese.children[0].style.display = 'block';
            }else{
                asidese.children[0].style.display = 'none';
            }
        })
        console.log("box3的值"+box3.offsetTop);
        var btn = asidese.children[0];
        console.log(asidese.children[0]);
        btn.addEventListener('click',function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        })
    </script>

三大系列的对比

offsetWidth 返回自身，并且包括padding，border，不带单位,经常用于获取元素的位置
clientWidth返回自身，但是不包括border,包括padding，经常用于获取元素的大小
scrollWidth 返回自身实际的宽度，元素的内容，但是不含边框返回数值不带单位经常用于获取滚动的距离，注意页面滚动通过window.pageXoffset获得,元素滚动距离通过scrollTop或者scrollLeft获取

mouseover和mouseenter的区别

mouseover：鼠标经过自身盒子触发，子盒子也会触发
mouseenter：鼠标经过自身盒子才会触发，不会进行冒泡处理

动画函数的封装

动画原理：使用定时器+元素定位+元素offset
给不同元素指定不同的定时器
缓动动画的原理：使用动画缓动执行，使速度慢慢停下来（目标值-现在的位置）
缓动动画需要将步长值改为整数，使用Math.ceil函数向上取整
缓动动画也可以添加回调函数

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 100px;
            background-color: rgb(6, 143, 153);
        }
        span{
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 210px;
            margin-left: 100px;
            background-color: rgb(21, 8, 139);
        }
    </style>

    <div class="box"></div>
    <span></span>
    <script>
        var box = document.querySelector('.box');
        var span =document.querySelector('span')
        function animate(obj, target) {
            clearInterval(obj.timer)
            obj.timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    clearInterval(timer)
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 150)
        }
        var box1= animate(box, 800);
        var span1 = animate(span,900)
    </script>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            position: absolute;
            display: block;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 100px 0;
            background-color: rgb(6, 143, 153);
        }

        span {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 200px 0;
            background-color: rgb(21, 8, 139);
        }
    </style>

    <div class="box"></div>
    <span></span>
    <script>
        var box = document.querySelector('.box');
        var span = document.querySelector('span');

        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15)
        }
        var box1 = animate(box, 800, function () {
            box.style.display = 'none'
        });
        var span1 = animate(span, 900)
    </script>

缓动函数封装地址

【函数地址】

利用缓动函数做一个鼠标触碰后移动的案例

<!DOCTYPE html>
<!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>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            width: 100%;
            overflow-x: hidden;
        }
        .container,.box,.box2{
            border-radius: 10px 0 0 10px;
        }
        .container {
            position: absolute;
            right: 0px;
            bottom: 50px;
            width: 50px;
            height: 50px;
            background-color: rgb(83, 3, 3);
        }

        .box {
            position: absolute;
            width: 50px;
            height: 50px;
            right: 0;
            bottom: 0px;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            line-height: 50px;
            background-color: rgb(42, 23, 94);
        }

        .box2 {
            position: absolute;
            right: -150px;
            bottom: 0;
            width: 150px;
            height: 50px;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            line-height: 50px;
            background-color: rgb(42, 23, 94);
        }
    </style>
    <div class="container">
        <div class="box">&lt;</div>
        <div class="box2">你好世界</div>
    </div>
    <script>
        var container = document.querySelector('.container');
        var box2 = document.querySelector('.box2');
        var box = document.querySelector('.box');
        container.addEventListener('mouseover', function () {
            animate(box2, -140, 15);
            box.innerHTML = '&gt;';
        })
        container.addEventListener('mouseout', function () {
            animate(box2, 140, 15);
            box.innerHTML = '&lt;'
        })
    </script>
    <script src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/animate.js"></script>

</body>

</html>

Harry-iu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript中缓动动画函数实例

scroll系列属性scrollTop/scrollLeft/ScrollWidth/scrollHeightoverflow:auto 使滑动自动显示页面被卷去的头部:可以通过window.pageYOffset获得如果是被卷的是左window.pageXoffset注意，元素被卷去的头部是elent.scollTop ,如果是页面被卷去的头部则是window.pageYoffset<body> <style> * {
复制链接

扫一扫