移动端的数据滚动插件

源码：

var DataScroll = function(){

        var list = null;    //滚动的列表
        var parent = null;  //列表的父节点
        var speed = null;   //滚动的速度
        var listHeight = null;   //列表的高度
        var self = this;

        //初始化数据
        this.init = function(obj)
        {   
            //插入数据
            $(obj['list']).parent().append( $(obj['list']).clone(true) );

            $(function(){
                
                list = obj['list'];
                parent = $(obj['list']).parent();
                speed = $(list).children().length;
                listHeight = parseInt($(list).css('height'));
                self.startAnimation();

            });
        },

        //开始滚动
        this.startAnimation = function()
        {
           var movelist = parent.children();
           for(var i=0; i<movelist.length; i++)
           {
               var mlist = movelist[i];
               $(mlist).attr('num', i);
               mlist.style.webkitTransform = 'translateY(0px)';

               //设置动画时间
               mlist.style.webkitTransition = 'all '+(i==0? speed : speed * 2)+'s linear 0s';

               //设置滚动位置
               mlist.style.webkitTransform = 'translateY(-'+(i==0? listHeight : listHeight * 2)+'px)'; 

               //滚动完成后的回调函数
               mlist.addEventListener('webkitTransitionEnd', function(){

                    var num = parseInt($(this).attr('num'));
                    var selfM = this;

                    //停止动画时间
                    selfM.style.webkitTransition = 'all 0s linear 0s';

                    //设置位置为最下面
                    selfM.style.webkitTransform = 'translateY('+( num==0? listHeight : 0)+'px)';

                    //再次开启动画
                    setTimeout(function(){
                        selfM.style.webkitTransition = 'all '+speed*2+'s linear 0s';
                        selfM.style.webkitTransform = 'translateY(-'+(num==0? listHeight : listHeight * 2)+'px)';
                    },10);
               });
           }  
        }
    } 

调用方式：

 

 new DataScroll().init({
            list : '#msg'  //滚动列表的id
        });

demo下载地址 ：http://download.csdn.net/detail/qq408896436/9716268