重新发明轮子之jQuery新闻滚动插件
任务需要,就写了一个jQuery新闻滚动插件jquery.roller.js,功能相对比较简单,可能往后会加入ajax一段时间轮询 动态加载的功能.下面直接给出源代码,如果需要可以直接下载 ,我在源码里给出了注释,有什么不足之处后或者可以改进的地方, 希望能够大家留言探讨...
效果图(比较朴素):
1 ;(function($) { 2 $.fn.roller = function(options) { 3 var opts = $.extend({}, $.fn.roller.defaults, options), 4 // 通过循环队列来管理滚动信息 5 itemQueue = new Array(); 6 7 return this.each(function(index) { 8 9 var $div = $(this).addClass('roller-container'); 10 // 用给定的数组进行初始化 11 if(opts.items && Util.isArray(opts.items)) { 12 for(var i = 0, len = opts.items.length; i < len; i++) { 13 itemQueue.push($('<div class="roller-item"></div>').append(buildLink(opts.items[i]))); 14 } 15 } else { 16 //同样可以用页面元素进行初始化 17 } 18 19 // 把一开始要显示的条目加入容器中 20 for(i = 0, len = opts.showNum; i < len; i++) { 21 if(isUp()) { 22 $div.append(itemQueue[i]); 23 } else { 24 $div.prepend(itemQueue[i]); 25 } 26 } 27 // 把已经加入容器的条目副本 放到循环队列的尾部 28 for(i = 0, len = opts.showNum; i < len; i++) { 29 var temp = itemQueue.shift(); 30 itemQueue.push(temp.clone()); 31 } 32 33 // 取得一个滚动元素 34 var _item = $('.roller-item:first', this), 35 // 取得它的外围高度 包括margin 36 _outHeight = _item.outerHeight(true), 37 // 容器的内容总高度 38 totalHeight = _outHeight * parseInt(opts.showNum, 10); 39 40 // 保存初始marginTop值 41 opts.orginal_marginTop = parseInt(_item.css('margin-top'), 10); 42 if(isUp()) { 43 opts.anim_marginTop = opts.orginal_marginTop - _outHeight - parseInt($div.css('padding-top'), 10); 44 } else { 45 opts.anim_marginTop = opts.orginal_marginTop + _outHeight; 46 } 47 48 // 初始化容器样式和事件 49 $div.css({ 50 'height': totalHeight + 'px', 51 'overflow': 'hidden' 52 }).hover(function() { 53 // 鼠标进入时 停止滚动 54 opts.hold = true; 55 }, function() { 56 // 鼠标离开 重新开始滚动 57 opts.hold = false; 58 startRolling($(this)); 59 }).trigger('mouseleave'); 60 61 }); 62 63 /** 64 * 滚动方向判断 65 */ 66 function isUp() { 67 if(opts.direction === 'up') return true; 68 if(opts.direction === 'down') return false; 69 throw new Error('direction should be "up" or "down"'); 70 } 71 72 /** 73 * 生成一个jQuery封装的<a/> 74 */ 75 function buildLink(item) { 76 var html = item.html; 77 delete item.html; 78 return $('<a></a>').attr(item).html(html); 79 } 80 81 function startRolling($div) { 82 setTimeout(function() { 83 // 是否停止滚动 84 if(!opts.hold) { 85 var first = null, 86 _funSelf = arguments.callee; 87 88 // 当前第一个元素 89 first = $div.find('.roller-item:first'); 90 91 first.animate({marginTop: opts.anim_marginTop}, 92 opts.interval, 93 function() { 94 // 从队列中取出下一个条目 95 var temp = itemQueue.shift(); 96 // 把它的副本放到队列的尾部 97 itemQueue.push(temp.clone()); 98 99 if(isUp()) { 100 // 移除当前第一个元素 101 first.remove(); 102 // 把刚取出的条目append到容器中 103 $div.append(temp.hide()); 104 } else { 105 // 移除当前最后一个元素 106 $div.find('.roller-item:last').remove(); 107 // 让当前第一个元素的marginTop恢复成初始值 108 first.css('margin-top', opts.orginal_marginTop + 'px'); 109 // 把刚取出的条目prepend到容器中 110 $div.prepend(temp.hide()); 111 } 112 113 temp.fadeIn(opts.interval - 50); 114 // 触发下一个循环 115 setTimeout(_funSelf, opts.interval); 116 }); 117 } 118 }, opts.interval); 119 }; 120 }; 121 122 //工具方法集合 123 var Util = { 124 toString: function(v) { 125 return Object.prototype.toString.apply(v); 126 }, 127 // 判断是否是Array 128 isArray : function(v){ 129 return Util.toString(v) === '[object Array]'; 130 } 131 }; 132 133 // 滚动新闻默认配置 134 $.fn.roller.defaults = { 135 interval: 1000, // 滚动间隔 136 showNum: 5, // 一次显示新闻数 137 hold: false, // 是否停止滚动 138 direction: 'up' // 滚动方向 139 }; 140 })(jQuery);
看下页面使用代码
1 $('#container').roller({ 2 showNum:4, //显示个数 3 interval: 1500, //滚动的时间间隔 4 direction: 'down', //滚动方向 5 items: [{ //内容 6 title: 'ccav滚动新闻1', //a的title属性 7 html: 'ccav滚动新闻1', //a的innerHTML 8 target: '_blank', //a的target 9 href: 'http://www.google.com.hk' //a的href 10 }, { 11 title: 'ccav滚动新闻2', 12 html: 'ccav滚动新闻2', 13 target: '_blank', 14 href: 'http://www.google.com.hk' 15 }, { 16 title: 'ccav滚动新闻3', 17 html: 'ccav滚动新闻3', 18 target: '_blank', 19 href: 'http://www.google.com.hk' 20 }, { 21 title: 'ccav滚动新闻4', 22 html: 'ccav滚动新闻4', 23 target: '_blank', 24 href: 'http://www.google.com.hk' 25 }, { 26 title: 'ccav滚动新闻5', 27 html: 'ccav滚动新闻5', 28 target: '_blank', 29 href: 'http://www.google.com.hk' 30 }, { 31 title: 'ccav滚动新闻6', 32 html: 'ccav滚动新闻6', 33 target: '_blank', 34 href: 'http://www.google.com.hk' 35 }] 36 });
