/*
*滾動效果實現原理：
*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];
    }
}

效果圖如下：

無間隙滾動