封装一个运动函数

最新推荐文章于 2024-11-05 11:58:24 发布

Serendipiy_yyj

最新推荐文章于 2024-11-05 11:58:24 发布

阅读量76

点赞数

分类专栏：笔记文章标签： html css html5 js javascript

本文链接：https://blog.csdn.net/weixin_46643055/article/details/120251416

版权

笔记专栏收录该内容

71 篇文章 0 订阅

订阅专栏

该博客主要介绍了如何使用JavaScript封装一个运动过程函数，用于控制元素的属性按指定速度平滑变化到目标位置。通过清除定时器并设置新的计时器实现动画效果，确保元素在到达目标位置时停止运动。该函数可用于网页交互中的动态效果实现。

摘要由CSDN通过智能技术生成

/*
*封装运动过程
*ele：要运动的标签
*attr：变化的属性名称
*speed：运动的速度
*target：目标位置
*/
 var timer = null
function move(ele,attr,speed,target){
  //开始动画时清除上一次动画
  clearInterval(timer)
  //开始计时器动画
  timer = setInterval(function(){
     
     var tgt = parseInt(getStyle(ele,arrt))+speed

        if((speed > 0 && tgt > target)||(speed < 0 && tgt > target)){
            clearInterval(timer)


        }
         ele.style[attr]  = tgt + "px"
     },10)