无间隙滚动

/*
*滚动效果实现原理：
*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
    });
};

// var w = this;/*这是绑定window对象*/
//构造函数
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");
    //循环执行动画实现无间隙动画效果
  var time=  setInterval(function () {
        _this.setAnimatedEleHeight()
    },_this.settings.delay);
    //document显隐监听事件，效果很好，解决浏览器离开后返回时的动画错乱问题
    document.addEventListener('visibilitychange',function(){ //浏览器切换事件
        //当页面离开隐藏不可见时，清除动画；
        if(document.visibilityState=='hidden') { //状态判断
            clearInterval(time)
        }else {
            //当页面可见时，继续执行
            time=setInterval(function () {
                _this.setAnimatedEleHeight()
            },_this.settings.delay);
        }
    });
    //浏览器离开事件控制，当为双屏显示时，鼠标离开页面，但是页面还是可见时，动画会清除，体验效果不是很好
    // w.addEventListener('focus',function () {
    //     time=setInterval(function () {
    //         _this.setAnimatedEleHeight()
    //     },_this.settings.delay);
    // });
    // w.addEventListener('blur',function () {
    //     clearInterval(time)
    // })
};

//设置动画高度
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
    });

    //动画完毕，添加移除类 并将元素添加到容器元素尾部，以进行无间隙动画
    //************  后发现会有细小的问题，导致动画后的元素有的不能够初始化动画高度，导致原因是延时 和动画时间会有干涉，从而影响动画后续的执行，所以直接用animate的返回函数执行后续无间隙动画，实现完美效果
    // setTimeout(function () {
    //     _this.setMoveClass();//设置move class
    //     _this.appendToEnd();//添加到容器元素尾部
    //     _this.setEleHeight();//重置元素高度
    //     _this.delateMoveClass();//删除move class
    // },this.settings.speed)
};

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];
    }
}

效果图如下：