动画函数的使用

晕fufufu

已于 2022-05-23 21:21:41 修改

阅读量247

点赞数

分类专栏： Dom 文章标签：动画 javascript 开发语言

于 2022-05-22 15:34:21 首次发布

本文链接：https://blog.csdn.net/Paolooo/article/details/124911400

版权

Dom 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

animate.js

function animate(obj,target,callback){
    //先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function(){
   // 步长值写到定时器的里面
   // 把我们步长值改为整数 不要出现小数的问题
   // var step =Math.ceil(target - obj.offsetLeft) /10;
   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();
       }
   }
   // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值-现在的位置)/10
   obj.style.left=obj.offsetLeft+ step +'px';
},30);
}

记得引入animate.js

<!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>
       
        span{
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: rgb(222, 116, 134);
        }
    </style>
</head>
<body>
    <button class="btn500">点击村长移动500</button>
    <button class="btn800">点击村长移动800</button>
     <span>村长</span>
     <script src="./animate.js"></script>
     <script>
    
       var span = document.querySelector('span');
       var btn500=document.querySelector('.btn500');
       var btn800=document.querySelector('.btn800');
    
  
     btn500.addEventListener('click',function(){
        //  调用函数
        animate(span,500);
     })
     btn800.addEventListener('click',function(){
        //  调用函数
        animate(span,800,function(){
            // alert('你好吗');
            span.style.backgroundColor = 'pink';
        });
     })
     </script>
</body>
</html>

晕fufufu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画函数的使用

animate.jsfunction animate(obj,target,callback){ //先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer = setInterval(function(){ // 步长值写到定时器的里面 // 把我们步长值改为整数不要出现小数的问题 // var step =Math.ceil(target - obj.offsetLeft) /10; var step
复制链接

扫一扫