/** * 滚动组件的实现 * @param {Object} $ */ (function($){ /** * 实现滚动方法 * @param {Object} options */ $.fn.initTable = function(options){ //默认配置 let defaults = { speed:null, //滚动速度,值越大速度越慢 rowHeight:24, //每行的高度 dataObj: null, ClassForEven: 'tb-evenRowStyle', ClassForHover: 'tb-rowhover', ClassForOdd: null }; //对象赋值 let opts = $.extend({}, defaults, options),intId = []; function marquee(obj, step){ obj.find("ul").animate({marginTop: '-=1'},0,function(){ let s = Math.abs(parseInt($(this).css("margin-top"))); if(s >= step){ let firstli = $(this).find("li").slice(0, 1) firstli.appendTo($(this)); $(this).css("margin-top", 0); } }); } function initScroll(obj, dataObj){ let mybody = $('.tb-scroll-body', obj); let myhead = $('.tb-scroll-head', obj) let key = null; let span_dom = null; mybody.empty(); $.each(dataObj,function(index,item){ mybody.append('
  • ') for(key in item){ span_dom = myhead.find("div[name='"+key+"']").clone(); span_dom.text(item[key]); mybody.find('li:last-child>a').append(span_dom); } }); } function addClassForHover(obj, styleName){ let mysty = $('ul>li', obj) mysty.hover(function(){ mysty.each(function(){ $(this).removeClass(styleName); }); $(this).addClass(styleName); }); mysty.mouseleave(function(){ $(this).removeClass(styleName); }); } //初始化数据 if(opts.dataObj){initScroll($(this), opts.dataObj)} if(opts.ClassForEven){$('>ul>li:even', this).addClass(opts.ClassForEven);} if(opts.ClassForOdd){$('>ul>li:odd', this).addClass(opts.ClassForOdd);} if(opts.ClassForHover){addClassForHover(this, opts.ClassForHover)} if(opts.speed){ this.each(function(i){ let sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); _this.hover(function(){ clearInterval(intId[i]); },function(){ intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); }); });} } /** * 行点击事件 * @param {Object} callback */ $.fn.rowOnclick = function(callback){ $('>ul>li', this).bind('click',function(){ let scroll_obj = {}; $(this).find('div').each(function(index,item){ scroll_obj[$(this).attr('name')]=$(this).text(); }); callback(scroll_obj); }); } })(jQuery);