jQueryニューススクロールプラグイン jquery.roller.js_jquery

ソースコードにコメントを付けましたが、欠点や改善できる点があれば、みんなでメッセージを残して議論していただければ幸いです...

レンダリング (比較的単純):

コードをコピー コードは次のとおりです。

;(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 itemQueue.push ($('

').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) ,
// マージンを含む外側の高さを取得します
_outHeight = _item.outerHeight(true),
// コンテナのコンテンツの合計の高さ
totalHeight = _outHeight * parseInt(opts.showNum, 10) ;
//marginTop の初期値を保存します
opts.orginal_marginTop = parseInt(_item.css('margin-top'), 10); (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(
}).trigger('mouseleave'); /
function isUp() {
if(opts .direction === 'up') return true;
if(opts.direction === 'down') return false; Error('方向は「上」または「下」である必要があります') ;
}
/**
* スクロール方向判定
*/
function buildLink(item) {
var html = item.html;
item.html を削除;
return $(' ').attr(item).html(html);
}
function startRolling($div) {
setTimeout(function() {
// スクロールを停止するかどうか
if(!opts.hold) {
var first = null,
_funSelf = argument.callee;
//現在の最初の要素
first = $div.find ('.roller-item:first');
first.animate({marginTop: opts.anim_marginTop},
opts.interval, function() {
// キューから次のアイテムを削除します アイテム
var temp = itemQueue.shift();
// そのコピーをキューの最後に置きます
itemQueue。 Push(temp.clone());
if(isUp() ) {
// 現在の最初の要素を削除します
first.remove();
// 取り出したばかりの項目を追加しますコンテナ
$div.append(temp.hide() );
} else {
// 現在の最後の要素を削除します
$div.find('.roller-item:last') .remove();
// 現在の first を作成します 各要素の marginTop を初期値に戻します
first.css('margin-top', opts.orginal_marginTop 'px');削除したばかりの項目をコンテナーに追加します
$div.prepend (temp.hide());
temp.fadeIn(opts.interval - 50); // 次のループをトリガーします
setTimeout(_funSelf, opts.interval);
}
};
};
var Util = {
toString: function(v ) {
return Object.prototype.toString.apply(v);
},
// 配列であるかどうかを判断します
isArray : function(v){
return Util.toString(v ) === '[object Array]';
}
}// ローリングニュースのデフォルト設定
$.fn.roller.defaults = {
interval: 1000, // スクロール間隔
showNum: 5, //一度に表示するニュース数
hold: false, // スクロールを停止するかどうか
direction: 'up' //スクロール方向
};
})( jQuery);


ページの使用法コードを確認してください




コードをコピーします


コードは次のとおりです:

$('#container').roller({
showNum:4, //表示番号
: 1500, //スクロール時間間隔
方向: 'down', //スクロール方向
項目: [{ //コンテンツ
タイトル: 'ccav スクロール ニュース 1', //属性のタイトル
html: 'ccav スクロールニュース 1', //a の innerHTML
target: '_blank', //a のターゲット
href: 'http://www.google.com.hk' //a の href
}, {
title: 'ccav ローリング ニュース 2',
html: 'ccav ローリング ニュース 2',
target: '_blank',
href: ' http://www .google.com.hk'
}, {
title: 'ccav ローリング ニュース 3',
html: 'ccav ローリング ニュース 3',
target: '_blank' ,
href : 'http://www.google.com.hk'
}, {
タイトル: 'ccav ローリング ニュース 4',
html: 'ccav ローリング ニュース 4',
ターゲット: ' _blank',
href: 'http://www.google.com.hk'
}, {
title: 'ccav ローリング ニュース 5',
html: ' ccav ローリング ニュース 5' 、
target: '_blank'、
href: 'http://www.google.com.hk'
}、{
title: 'ccav ローリング ニュース 6' 、
html : 'ccav ローリング ニュース 6',
target: '_blank',
href: 'http://www.google.com.hk'
}]
}) ; 🎜>
オンライン デモ

http://demo.jb51.net/js/2011/news_roller_Demo/jquery.roller.html
パッケージのダウンロード
/201106/yuanma/news_roller_Demo.rar