移动端的数据滚动插件

来源：互联网发布：成都大数据售前编辑：程序博客网时间：2024/06/05 05:59

源码：

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

0 0