无间隙滚动

/**滚动效果实现原理：*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  classseamlessRolling.prototype.setMoveClass = function () {    $(this.settings.eleID+" "+"."+this.settings.animationClass).eq(0).addClass(this.settings.moveClass);

};

//移除 move classseamlessRolling.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];    }}

效果图如下：

原文地址：https://www.cnblogs.com/chenjianbao/p/9880958.html