20-JS:缓存动画、回调函数

最新推荐文章于 2022-05-06 14:13:00 发布
最新推荐文章于 2022-05-06 14:13:00 发布
阅读量201 收藏
点赞数
分类专栏： 前端学习 文章标签： javascript html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51339105/article/details/124369429
版权

1.缓动动画原理

缓动动画让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1.让盒子每次移动的距离慢慢变小，速度就会慢慢减下来
2：(目标位置 - 当前位置) / 10 作为每次移动的距离步长
3：停止条件 让盒子当前位置等于目标位置 就停止定时器
4：步长值需要取整
案例

<!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: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>

    <button>点击</button>
    <div></div>

    <script>

        // Math.ceil  向上取整    Math.floor   向下取整

     //obj  目标对象    target  目标位置 
        var oDiv = document.querySelector('div');
        var oBtn =document.querySelector('button');

        function animate(obj,target){
              clearInterval(obj.timer);
              obj.timer = setInterval(function(){
                //   求步长   步长要写到定时器里面
                // 步长向上取整  变为1  到最后(目标位置 - 当前位置)小于10时  步长变为1px 1px的移动
                var step = Math.ceil((target - obj.offsetLeft) /10);
                // console.log(step,1)
                  if(obj.offsetLeft == target){
                      clearInterval(obj.timer)
                     
                  }
                //   缓动动画  把每次加1这个步长值改为一个慢慢变小的值
                // 步长公式：(目标位置 - 当前位置) / 10 
                  obj.style.left = obj.offsetLeft + step + 'px';
              },15)
        }
        oBtn.addEventListener('click',function(){
            animate(oDiv,500)
        })
       

        // 匀速动画  盒子当前位置 + 固定的值  1px
        // 缓动动画   盒子当前位置 + 变化的值  （目标位置-当前位置）/ 10
    </script>
</body>
</html>

2.多个目标值之间移动

让动画从100移动到800，再移动到1000，再移动到500
100--------500 目标值 > 当前位置 步长正值
800---------300 目标值 < 当前位置 步长负值
案例

<!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;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>

    <button class="btn1">100</button>
    <button class="btn2">500</button>
    <div></div>

    <script>

        // Math.ceil  向上取整    Math.floor   向下取整

     //obj  目标对象    target  目标位置 
        var oDiv = document.querySelector('div');
        var oBtn1 =document.querySelector('.btn1');
        var oBtn2 =document.querySelector('.btn2');

        function animate(obj,target){
              clearInterval(obj.timer);
              obj.timer = setInterval(function(){
                //   求步长   步长要写到定时器里面
                // 步长向上取整  变为1  到最后(目标位置 - 当前位置)小于10时  步长变为1px 1px的移动
                var step = (target - obj.offsetLeft) /10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                // console.log(step,1)
                  if(obj.offsetLeft == target){
                      clearInterval(obj.timer)
                     
                  }
                //   缓动动画  把每次加1这个步长值改为一个慢慢变小的值
                // 步长公式：(目标位置 - 当前位置) / 10 
                  obj.style.left = obj.offsetLeft + step + 'px';
              },15)
        }
        oBtn1.addEventListener('click',function(){
            animate(oDiv,100)
        })
       
        oBtn2.addEventListener('click',function(){
            animate(oDiv,500)
        })

        // 匀速动画  盒子当前位置 + 固定的值  1px
        // 缓动动画   盒子当前位置 + 变化的值  （目标位置-当前位置）/ 10
    </script>
</body>
</html>

3.回调函数

函数作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完后，再执行传进去的这个函数，这个过程叫回调

<!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>
    

    <script>
          
        //   b传的是一个函数  就相当于形参的变量值是一个函数
        function fn(a,b){
            var c = a + 10;
            console.log(c)

            b()
        }

        fn(20,function(){
            alert(123)
        })
    </script>
</body>
</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>
    <style>
        div{
            position: absolute;
            left: 0;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>

    <button class="btn1">100</button>
    <button class="btn2">500</button>
    <div></div>

    <script>

        // Math.ceil  向上取整    Math.floor   向下取整

     //obj  目标对象    target  目标位置 
        var oDiv = document.querySelector('div');
        var oBtn1 =document.querySelector('.btn1');
        var oBtn2 =document.querySelector('.btn2');

        function animate(obj,target,callback){
              clearInterval(obj.timer);
              obj.timer = setInterval(function(){
                //   求步长   步长要写到定时器里面
                // 步长向上取整  变为1  到最后(目标位置 - 当前位置)小于10时  步长变为1px 1px的移动
                var step = (target - obj.offsetLeft) /10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                // console.log(step,1)
                  if(obj.offsetLeft == target){

                    // 清除定时器------最后执行的代码
                      clearInterval(obj.timer)
                    //   alert('我到终点了')
                    // 回调函数写在定时器结束里面
                    callback && callback()
                     
                  }
                //   缓动动画  把每次加1这个步长值改为一个慢慢变小的值
                // 步长公式：(目标位置 - 当前位置) / 10 
                  obj.style.left = obj.offsetLeft + step + 'px';
              },15)
        }
        oBtn1.addEventListener('click',function(){
            animate(oDiv,100)
        })
       
        oBtn2.addEventListener('click',function(){
            animate(oDiv,500,function(){
                alert('动画结束了')
            })
        })

        // 匀速动画  盒子当前位置 + 固定的值  1px
        // 缓动动画   盒子当前位置 + 变化的值  （目标位置-当前位置）/ 10
    </script>
</body>
</html>

4.返回顶部

<!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>
        .main{
            width: 1000px;
            margin: 30px auto;
        }
        .box1{
            height: 300px;
            background-color: red;
        }
        .box2{
            height: 500px;
            background-color: yellow;
        }
        .box3{
            height: 900px;
            background-color: blueviolet;
        }
        .back{
            position: absolute;
            left: 80%;
            top: 400px;
            display: none;
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    
    <div class="box1 main"></div>
    <div class="box2 main"></div>
    <div class="box3 main"></div>

    <div class="back"></div>



    <script>
      
    //   1  获取元素
    var oBack = document.querySelector('.back');

    var oBox2 = document.querySelector('.box2');
    var oBox2Top = oBox2.offsetTop




     document.addEventListener('scroll',function(){
          
        // 我们页面被卷走的头部距离大于等于 黄色盒子 距页面顶部的距离  把back 设置为固定定位
        if(window.pageYOffset >= oBox2Top){
            oBack.style.position = 'fixed';
            oBack.style.display = 'block';
        }else{
            oBack.style.position = 'absolute';
            oBack.style.display = 'none';
        }
     })


     /* 
     window.scroll （x,y） 想要置于左上角的像素点的横纵坐标 
     浮动窗口至文档中指定的位置
     */
    </script>
</body>

5.轮播图

1.鼠标经过轮播图模块，左右按钮显示，离开左右按钮隐藏；

2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮一样的道理

3.图片播放的同时，小圆点跟着一起播放；

4.点击小圆点还可以播放相应的图片；

5.鼠标不经过轮播图，轮播图会自动播放；

6.鼠标经过轮播图，轮播图自动播放停止；

weixin_51339105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js之pc端网页特效缓冲动画（2）
m0_61547956的博客
05-07 536
目录 一、缓冲动画原理 二、缓冲动画多个目标值之间移动 三、缓冲动画添加回调函数 四、动画函数的使用之问题反馈案例 五、案例之品优购轮播图 六、节流阀以及逻辑中断应用 七、筋斗云案例 一、缓冲动画原理 让元素的速度有所变化，最常见的是让速度慢慢停下。 原理：让盒子每次移动的距离越来越小，速度就会慢慢停下来，核心算法：（目标位置-当前位置）/10，作为每次移动的步长，比如目标位置是100，当前位置0，所以步长就会10...9、8、7...0，停止的条件，让当前盒子距离等于目标位置就停止..
实现简单的广告倒计时
qq_48930299的博客
04-09 175
<!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>Do
CSS3动画的回调处理
weixin_33691817的博客
12-11 108
我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？ CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。 1、transition 对于transition，可以监听transiti...
JavaScript-232：给不同的元素指定了不同的定时器
臧小川的博客
05-06 134
效果图 结构 <button>点击夏雨荷才走</button> <div></div> <span>夏雨荷</span> CSS div { position: absolute; left: 0; width: 100px; height: 100px; background-
js中的函数封装，回调函数实现的简单动画效果
努力的zhiyi
07-02 1166
js实现的简单动画效果 一、js实现的简单动画       1、此代码中运用了js中的构造函数，函数封装，回调函数，函数内的正负值的判                断，以及获取属性、setInterval等知识点实现了简单的动画效果。       2、动画的效果是：点击走的按钮，页面中的div会沿着你设置的位置进行行走，走一            圈，最后回到初始位置。       3、
library-javascript-core:核心 Viewbook Javascript 模块
07-11
7. **异步编程**：JavaScript 是单线程的，因此库可能包含对异步编程的支持，如 Promises 或 async/await，帮助开发者处理回调地狱。 8. **路由管理**：如果 Viewbook 是一个单页应用（SPA），那么路由管理是必不可...
javascript-recipes:简明扼要的JS食谱
05-19
此外，JavaScript还支持异步编程，如回调函数、Promise和async/await，这些对于处理耗时操作如网络请求至关重要。 `javascript-recipes-master`这个压缩包可能包含了一系列关于JavaScript编程的示例和练习，包括但...
Food-web-js-club:CTV JS项目
05-28
6. 异步编程：项目可能涉及Promise、async/await等异步编程技术，用于处理复杂的异步流程控制，如加载资源、处理回调等。 7. 模块化：使用ES6的模块系统（import/export）进行代码的模块化组织，提高代码的可维护性...
JS-advanced-lessons:js练习
05-11
3. **异步编程**：包括回调函数、Promise、async/await等，它们是处理非阻塞I/O和提高JavaScript性能的关键。 4. **模块系统**：了解CommonJS（如Node.js中使用）和ES6的模块系统（如`import`和`export`），这对于...
js-campominato:港区坎波
03-15
5. **异步编程**：JavaScript是单线程的，但通过异步机制如回调函数、Promise和async/await可以处理非阻塞I/O操作，如网络请求。 6. **模块化**：ES6引入了模块系统，允许通过`import`和`export`关键字来组织和导入...
WOW和animate样式.rar
03-16
WOW和animate结合，网页动画实现更加简单。自己收藏使用，免费分享。
js自写封装缓动动画函数
qq_43465393的博客
04-29 138
翻看以前学习内容发现与拿来封装了好多函数 记录一下 f//缓动动画公式（目标值-现在位置）/10 function animation(obj, target,callback) { clearInterval(obj.timer); obj.timer = setInterval(function () { // var step_size=Math.ceil((target-obj.offsetLeft)/10);考虑回来负值的原因 //步长值要写在定时器
原生JS封装一个简单动画函数，添加回调函数
loveforlongtime的博客
03-30 1275
JS封装动画函数具体步骤
JS缓动动画原理
qq_38333377的博客
06-26 279
JS的缓动动画主要用到的组件：定时器 注意事项：开启定时器前，记得先清除定时器clearInterval(timer)，然后再开启一个定时器 var begin = 0,end = 0; 对于直线运动的动画，一般都是通过修改position的值eg：left = end - begin +‘px’；来达到动画的效果 最后记得每次开启一个定时器,最后一定要清除它,不然它会一直消耗资源 ...
JS实现简单的动画效果 —— 缓动动画的原理
爱前端的程序媛的博客
03-18 1659
写在前面 每天都奔赴自己的热爱，是多么幸福的一件事。 唯有美食和理想不可辜负。 CSS中学习了动画，是使用keyframe定义动画，然后添加动画。今天主要是用JS实现动画效果，同时理解动画的原理。emmmm ， 本篇文章介绍的是元素移动的效果的原理，其他的还没有了解。见谅见谅哈。 动画的原理 动画移动的原理：1.获得元素当前位置；2.每隔一定时间元素位置 加 1；2.使用定时器重...
JavaScript-缓冲动画小案例
OuYyds的博客
04-07 194
有四个红色div，当鼠标移入时，让红色的div以缓冲速度变宽，鼠标移开时，让红色div以缓冲速度回到原来的宽度，且移入时位置发生变化，移出又回到原来的位置。 <style> div{ width: 100px; height: 100px; background-color: red; margin-top: 5px; posit...
JS如何监听动画结束
u011927449的博客
01-20 3832
场景描述 在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作，所以需要监听动画结束进行回调。JS提供了以下事件用于监听动画的结束，简单总结学习下。 CSS3动画监听事件 trans...
对js中回调函数的理解
YmwWow的博客
10-29 582
一、什么是回调函数 一直接触回调函数这个名词，但是不知道具体是干什么的，今天在百度上看到了一句话让对回调函数产生了一点兴趣，那就是回调函数的英文解释： A callback is a function that is passed as an argument to another function and is executed after its parent function has c...
JavaScript的单线程性质以及定时器的工作原理（转）
口乃心之门户
08-27 154
　最近在写JavaScript时遇到一些问题，就是当JavaScript多事件连续触发，JavaScript的单线程引擎是如何控制的。找了一些资料，觉得很有用，在此分享一下。 　　虽然不是原创，但是觉得此文章对JavaScript程序员非常有用。翻译的不是十分精确，但希望对大家有用。 　　原文：John Resig　 http://ejohn.org/blog/how-javascri...
js-HTML-css大全
最新发布
09-28
- **Promise**：JavaScript中的异步操作对象，用于处理回调地狱。 - **HTTP状态码**：表示客户端与服务器交互的状态，如200成功，404未找到，500服务器错误等。 - **CDN**：内容分发网络，加速静态资源的访问速度。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值