jQuery新闻滚动插件 jquery.roller.js

2020-05-23 06:22:19易采站长站整理

我在源码里给出了注释,有什么不足之处后或者可以改进的地方, 希望能够大家留言探讨…
效果图(比较朴素):


;(function($) {
$.fn.roller = function(options) {
var opts = $.extend({}, $.fn.roller.defaults, options),
// 通过循环队列来管理滚动信息
itemQueue = new Array();
return this.each(function(index) {
var $div = $(this).addClass(‘roller-container’);
// 用给定的数组进行初始化
if(opts.items && Util.isArray(opts.items)) {
for(var i = 0, len = opts.items.length; i < len; i++) {
itemQueue.push($(‘<DIV class=roller-item></DIV>’).append(buildLink(opts.items[i])));
}
} else {
//同样可以用页面元素进行初始化
}
// 把一开始要显示的条目加入容器中
for(i = 0, len = opts.showNum; i < len; i++) {
if(isUp()) {
$div.append(itemQueue[i]);
} else {
$div.prepend(itemQueue[i]);
}
}
// 把已经加入容器的条目副本 放到循环队列的尾部
for(i = 0, len = opts.showNum; i < len; i++) {
var temp = itemQueue.shift();
itemQueue.push(temp.clone());
}
// 取得一个滚动元素
var _item = $(‘.roller-item:first’, this),
// 取得它的外围高度 包括margin
_outHeight = _item.outerHeight(true),
// 容器的内容总高度
totalHeight = _outHeight * parseInt(opts.showNum, 10);
// 保存初始marginTop值
opts.orginal_marginTop = parseInt(_item.css(‘margin-top’), 10);
if(isUp()) {
opts.anim_marginTop = opts.orginal_marginTop – _outHeight – parseInt($div.css(‘padding-top’), 10);
} else {
opts.anim_marginTop = opts.orginal_marginTop + _outHeight;
}
// 初始化容器样式和事件
$div.css({
‘height’: totalHeight + ‘px’,
‘overflow’: ‘hidden’
}).hover(function() {
// 鼠标进入时 停止滚动
opts.hold = true;
}, function() {
// 鼠标离开 重新开始滚动
opts.hold = false;
startRolling($(this));
}).trigger(‘mouseleave’);
});
/**
* 滚动方向判断
*/
function isUp() {
if(opts.direction === ‘up’) return true;
if(opts.direction === ‘down’) return false;
throw new Error(‘direction should be “up” or “down”‘);
}
/**
* 生成一个jQuery封装的<A></A>
*/
function buildLink(item) {
var html = item.html;
delete item.html;
return $(‘<A></A>’).attr(item).html(html);
}
function startRolling($div) {
setTimeout(function() {
// 是否停止滚动
if(!opts.hold) {
var first = null,
_funSelf = arguments.callee;
// 当前第一个元素
first = $div.find(‘.roller-item:first’);