封装一个简单的动画函数_情愿_前端开发者

/**
 * 
 * 动画函数多个目标值之间移动
 * 1、如果是正值,则向大取整 2、如果是负值,则向小取整
 * 
 * 
 * 
 * @param {元素} obj 
 * @param {距离} target 
 * @param {回调函数} callback
 */

function ainmate (obj,target,callback){
    // 清除定时器,是指清除谁的定时器,这里是轮播图,所以清除元素的定时器
    clearInterval(obj.timer);
    // 创建定时器,清除定时器,页面中就没有定时器,每轮播一次创建一个定时器,
    // 使其页面中只保留一个定时器,同理元素的定时器
    obj.timer = setInterval(function(){
        //定义步长值变量,用来接收走的步数
        // 步长值 = (距离 – 元素距离左边的距离) 除 10;   //10代表分成几份,可以更多,可以更少,看个人审美
        var step = (target – obj.offsetLeft) / 10;
        // 三元表达式, 当step的距离是向右移动是整数,会有一点误差,所以天花板函数取大,取整   相反往左移动会出现小数,则地板函数取小,取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step) ;
        // 轮播一周后,清除定时器
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // 回调函数,判断是否有回调函数,如果有调用,如果没有不调用
            if (callback){
                callback();
            }
            // 简写方法
            // callback && callback();
        }
        //轮播的元素需要有css里定位
        // 轮播的运算 
        obj.style.left = obj.offsetLeft + step +’px’;
    },30)
}
/**
 * 
 * 动画函数多个目标值之间移动
 * 1、如果是正值,则向大取整 2、如果是负值,则向小取整
 * 
 * 
 * 
 * @param {元素} obj 
 * @param {距离} target 
 * @param {回调函数} callback
 */

function ainmate (obj,target,callback){
    // 清除定时器,是指清除谁的定时器,这里是轮播图,所以清除元素的定时器
    clearInterval(obj.timer);
    // 创建定时器,清除定时器,页面中就没有定时器,每轮播一次创建一个定时器,
    // 使其页面中只保留一个定时器,同理元素的定时器
    obj.timer = setInterval(function(){
        //定义步长值变量,用来接收走的步数
        // 步长值 = (距离 – 元素距离左边的距离) 除 10;   //10代表分成几份,可以更多,可以更少,看个人审美
        var step = (target – obj.offsetLeft) / 10;
        // 三元表达式, 当step的距离是向右移动是整数,会有一点误差,所以天花板函数取大,取整   相反往左移动会出现小数,则地板函数取小,取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step) ;
        // 轮播一周后,清除定时器
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // 回调函数,判断是否有回调函数,如果有调用,如果没有不调用
            if (callback){
                callback();
            }
            // 简写方法
            // callback && callback();
        }
        //轮播的元素需要有css里定位
        // 轮播的运算 
        obj.style.left = obj.offsetLeft + step +’px’;
    },30)
}
» 本文来自:前端开发者 » 《封装一个简单的动画函数_情愿_前端开发者》
» 本文链接地址:https://www.rokub.com/73239.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!