zoukankan      html  css  js  c++  java
  • JavaScript封装动画函数优化,解决点击按钮创建多个定时器的问题

     //动画函数
        function animate(element, target) {
            //先清理定时器
            clearInterval(element.tinmeId);
            //一会要清理定时器(只产生一个定时器)
            element.tinmeId = setInterval(function () {
                //获取div当前的位置
                var current = element.offsetLeft;//数字类型没有px
                //div每次移动多少像素-----步数
                var step = 10;
                step = current < target ? step : -step;
                //每次移动后的距离
                current += step;
                //判断当前移动后的位置是否到达目标位置
                if (Math.abs(target - current) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    //清理定时器
                    clearInterval(element.tinmeId);
                    element.style.left = target + "px";
                }
            }, 20)
        }
  • 相关阅读:
    Elastic Search的学习
    数据分析相关
    爬虫相关
    Git 知识总结
    运维开发
    Flask
    Linux入门
    MYSQL, REDIS 等数据库的介绍
    Django的学习之路
    逆向工具Frida 环境搭建
  • 原文地址:https://www.cnblogs.com/cuilichao/p/9407373.html
Copyright © 2011-2022 走看看