缓动画原理:js轮播图，返回顶部

曹莓奶昔

已于 2023-03-28 16:26:56 修改

阅读量219

点赞数

分类专栏： JavaScript 文章标签：动画 javascript html

于 2022-05-30 08:59:08 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/125030918

版权

JavaScript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1. 缓动画效果原理

思路：

让盒子每次移动距离慢慢变小，速度就会慢慢落下来
核心算法：（目标值-现在位置）/10 作为每次增长的距离步长
停止条件：当前的盒子位置等于目标位置就停止定时器
因为步长值计算的结果是小数，因此需要把步长值改为整数往上取整：math.ceil()
如果要往回走（先左），步长值要向下取整取整：Math.floor()

<!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>
        div {
            position: absolute;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: aqua;
        }

        span {
            position: absolute;
            left: 0;
            top: 100px;
            width: 100px;
            height: 20px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <button>点击运动</button>
    <div></div>
    <span></span>
    <script>
        // 给不同元素给定不同定时器
        function animate(obj, target) {
             // 不断点击按钮，元素速度加快，因为开启太多的定时器
            // 解决方案，让元素只有一个定时器在执行
            clearInterval(obj.target);
            obj.time = setInterval(function () {
                // 步长值在定时器里面
                var step=(target-obj.offsetLeft)/10;
                if (obj.offsetLeft >= target) {
                    clearInterval(obj.time);
                }
                // 每次加1这个步长值改变一个慢慢变小的值，（目标值-现在位置）/10
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            animate(span, 900)
        })
        animate(div, 300);

    </script>
</body>

</html>

匀速动画：盒子当前位置+固定的值
缓动动画：盒子当前位置+变化的值（目标-现在）/10

1.2 多个目标值之间的移动

用三元表达式判断是往前走还是往回走，如果是往前走就用Math.ceil()向上取整，往回走就是想下取整Math.floor()

<body>
    <button class="go"> 点击运动</button>
    <button class="back"> back</button>
    <div></div>
    <span></span>
    <script>
        // 给不同元素给定不同定时器
        function animate(obj, target) {
             // 不断点击按钮，元素速度加快，因为开启太多的定时器
            // 解决方案，让元素只有一个定时器在执行
            clearInterval(obj.target);
            obj.time = setInterval(function () {
                // 步长值在定时器里面
                //步长值改为整数：math.ceil()往上取整
                var step= (target - obj.offsetLeft) / 10;
                step=step>0?Math.ceil(step):Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.time);
                }
                // 每次加1这个步长值改变一个慢慢变小的值，（目标值-现在位置）/10
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }
        var back=document.querySelector('.back')
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var gos = document.querySelector('.go');
        gos.addEventListener('click', function () {
            animate(span, 900)
        })
        back.addEventListener('click', function () {
            animate(span, 500)
        })
        animate(div, 300);

    </script>
</body>

1.3 动画函数添加回调函数

回调函数原理：函数作为一个参数，这个函数作为参数传递到另一个函数里，这个函数执行完，再执行传进去的这个函数，这个过程叫回调函数

在动画函数加一个参数 function animate（，，callback）{

//在定时器结束里面调用回调函数

if（callback）{

callback（）；

}

}

调用动画函数

animate （，，function（）{

回调内容

}）

2. 常见的网页特效案例

2.1 网页轮播图

轮播图也称焦点图，在网页中经常看见

功能需求：

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
点击左按钮，图片向左播放，点击右侧按钮，图片向右播放
图片播放同时，下面的小圆圈模块跟随一起变化
点击小圆圈，可以播放对应图片
鼠标不经过轮播图，会自动播放图片
鼠标经过，轮播图模块，自动播放停止

1. 动态生成小圆圈

核心思路：小圆圈的个数和图片张数一致
得到ul里面的图片数量（图片放li，即就是li的数量）
利用for循环动态生成小圆圈（放入ol里面）
创建节点 creatElement("li")
插入节点ol.appendChild(li)

2. 小圆圈排他思想

点击当前这个小圆圈，添加current类
其余小圆圈就移除current类

3. 点击小圆圈可以滑动图片

使用动画函数的元素一定要有定位
注意ul移动而不是li
滚动图片的核心算法：点击小圆圈，小圆圈的索引号乘图片的宽度叫ul的移动距离

4.右按钮无缝滚动

点击右侧按钮一次，就让图片滚动一张
声明一个num，点击一次加1，num乘图片宽度，就是ul的滚动距离
ul第一个li复制放到ul最后
滚动到最后一张时，让ul不做动画的跳到最左侧：left：0
同时num赋值为0.重新开始滚动图片

5. 克隆第一张图片

克隆ul 第一个li cloneNode（）加true 深克隆复制到子节点 false浅克隆

6. 点击小圆圈图片跟随变化

声明一个circle变量，点击一次加一，注意要全局声明，因为有左按钮
图片有5张，小圆圈只有4个，让circle==0，重新复原就好啦

7. 自动播放的功能

添加一个定时器
自动播放功能就是点击了右侧按钮
使用手动调用事件（右侧按钮加）

2.2. 节流阀

防止轮播图按钮点击过快造成播放过快

目的：当上一个函数内容执行完毕，在执行下一个函数动画，让事件无法连续触发
核心思路：利用回调函数，添加一个变量控制，锁住函数和解锁函数
开始设置一个变量 var flag=true；
关闭：if（flag）{flag=false；...}
利用回调函数动画执行完毕，flag=true；开启

2.3 返回顶部

滚动窗口至文档中特点位置

window.scroll(0,0)

案例分析：

带有动画的返回顶部
使用封装的动画函数
把所有的left相关的值改为与页面垂直滚动距离相关
页面滚动 window.pageYoffset
页面滚动，使用window.scroll(x,y)

曹莓奶昔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
缓动画原理:js轮播图，返回顶部

用三元表达式判断是往前走还是往回走，如果是往前走就用Math.ceil()向上取整，往回走就是想下取整Math.floor()回调函数原理：函数作为一个参数，这个函数作为参数传递到另一个函数里，这个函数执行完，再执行传进去的这个函数，这个过程叫回调函数。在动画函数加一个参数 function animate（，，callback）{防止轮播图按钮点击过快造成播放过快。轮播图也称焦点图，在网页中经常看见。3. 点击小圆圈可以滑动图片。6. 点击小圆圈图片跟随变化。小圆圈的索引号乘图片的宽度。
复制链接

扫一扫

专栏目录