欢迎光临
我们一直在努力

轮子库 | JS控制CSS样式变化封装

支持的属性:left top right bottom width height marginLeft marginTop … 属性值带单位px的属性;

支持 透明度切换,支持 scrollLeft scrollTop;

支持多属性同时运动。

// 支持的属性:left  top   right  bottom  width  height  marginLeft  marginTop  ... 属性值带单位px的属性
// 支持 透明度切换,支持 scrollLeft  scrollTop
// 支持多属性同时运动
// function animate(dom,attr,target){// 单属性  当前值 -> 目标值
function animate(dom,attr_obj,callback){// 多属性  当前值 -> 目标值
    // 获取每一个属性的current和target,重新整理attr_obj对象
    // attr_obj = {
    //     'width': {
    //         'current': 属性当前值,
    //         'target': 300
    //     },
    //     'height': {
    //         'current': 属性当前值,
    //         'target': 300
    //     },
    //     ...
    // }
    for (var attr in attr_obj){
        // 获取当前值和目标值
        if (attr === 'opacity') {
            var current = parseInt( getComputedStyle(dom,null)[attr]*100 );
            var target = attr_obj[attr]*100;
        } else if ( attr.indexOf('scroll') !== -1 ) {
            var current = dom[attr];
            var target = attr_obj[attr];
        } else {
            var current = parseInt( getComputedStyle(dom,null)[attr] );
            var target = attr_obj[attr];
        }
        attr_obj[attr] = {
            'current': current,
            'target': target
        }
    }
    
    clearInterval(dom.timer);
    dom.timer = setInterval(function (){
        for (var attr in attr_obj){
            var current = attr_obj[attr].current;
            var target = attr_obj[attr].target;
            // 不断变化的速度
            var speed = (target - current) / 10;
            // 小数计算有误差,容易造成数据丢失 => 取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            // 判断到达目的地:剩余运动量 <= 每次的运动量
            if (Math.abs(target - current) <= Math.abs(speed)) {
                if (attr === 'opacity') {
                    dom.style[attr] = target / 100;
                } else if (attr.indexOf('scroll') !== -1) {
                    dom[attr] = target;
                } else {
                    dom.style[attr] = target + 'px';
                }
                // 从attr_obj对象中删除已完成运动的属性
                delete attr_obj[attr];

                // 如果对象中还有其他属性,此时不应该终止计时器
                for (var key in attr_obj){
                    // 有其他属性未完成动画
                    return;
                }

                // console.log( '运动结束' );
                clearInterval(dom.timer);//终止计时器
                // if (callback) {
                //     callback();
                // }
                // callback ? callback() : '';
                typeof callback === 'function' ? callback() : '';
            } else {
                // 此时不能直接使用current,因为它是一个临时变量
                // current += speed;
                // 使用对象中的数据进行累加
                attr_obj[attr].current += speed;
                if (attr === 'opacity') {
                    dom.style[attr] = attr_obj[attr].current / 100;
                } else if (attr.indexOf('scroll') !== -1) {
                    dom[attr] = attr_obj[attr].current;
                } else {
                    dom.style[attr] = attr_obj[attr].current + 'px';
                }
            }
        }
    },20);
}
赞(0) 打赏
未经允许不得转载:散人研 » 轮子库 | JS控制CSS样式变化封装
分享到: 更多 (0)

评论 抢沙发

9 + 8 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏