无间隙滚动

Posted 2021-01-16 chenjianbao

/*
*滚动效果实现原理：
*1.滚动元素动画改变元素高度直至为0；
*2.将动画完毕的元素，添加到容器元素底部，并设置初始高度；
*3.动画循环进行，从而实现无间隙的滚动效果
*/

//初始化，进行调用
window.onload = function () {
    var dl = new seamlessRolling();
    //初始化动画，并配置所需参数
    dl.init({
        eleID:‘#right-order-content‘,
        animationClass:"right-row",
        moveClass:"right-move",
        speed:1000,
        delay:2000,
        eleHeight:35
    });
};

//构造函数
function seamlessRolling() {
    this.settings ={
        eleID:"",//动画容器元素
        animationClass:"",//动画类
        moveClass:"",//移除类
        speed:1000,//动画速度
        delay:2000,//动画间隔时间
        eleHeight:35//动画高度-------最好和动画元素高度一致
    }
}

//初始化
seamlessRolling.prototype.init = function (opt) {
    var _this = this;
    extend(this.settings,opt);//复制配置参数
    this.animationEle();//初始化动画
};

//执行动画
seamlessRolling.prototype.animationEle = function () {
    var _this = this;
    // console.log("start");
    //循环执行动画实现无间隙动画效果
    setInterval(function () {
        _this.setAnimatedEleHeight()
    },_this.settings.delay);
};

//设置动画高度
seamlessRolling.prototype.setAnimatedEleHeight = function () {
    var _this =this;
    // this.setHeight();
    //单个元素动画

    $(this.settings.eleID+" "+"."+this.settings.animationClass).eq(0).animate({height:"0px"},this.settings.speed,function () {
        //动画完毕，添加移除类 并将元素添加到容器元素尾部，以进行无间隙动画
        _this.setMoveClass();//设置move class
        _this.appendToEnd();//添加到容器元素尾部
        _this.setEleHeight();//重置元素高度
        _this.delateMoveClass();//删除move class
    });

};

seamlessRolling.prototype.setEleHeight = function () {
    $(this.settings.eleID+" "+"."+this.settings.moveClass).eq(0).css("height",this.settings.eleHeight+"px");
};
//动画结束后，添加到容器尾部
seamlessRolling.prototype.appendToEnd = function () {
    $(this.settings.eleID+" "+"."+this.settings.moveClass).eq(0).appendTo($(this.settings.eleID));

};

//添加 移除类 move  class
seamlessRolling.prototype.setMoveClass = function () {
    $(this.settings.eleID+" "+"."+this.settings.animationClass).eq(0).addClass(this.settings.moveClass);

};

//移除 move class
seamlessRolling.prototype.delateMoveClass = function () {
    $(this.settings.eleID+" "+"."+this.settings.moveClass).eq(0).removeClass(this.settings.moveClass);
    // console.log(this.settings.moveClass);

};

//实现复制
function extend(obj1,obj2) {
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}

效果图如下：