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 < len; 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 * parsInt(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() {
// 마우스가 들어갈 때 스크롤 다시 시작 Leaves
opts.hold = false;
startRolling(
}).trigger('mouseleave')
/**
* 스크롤 방향 판단
* /
function isUp() {
if(opts .direction === 'up') return true
if(opts.direction === 'down') return false
throw new; Error('방향은 "위" 또는 "아래"여야 합니다.') ;
}
/**
* 캡슐화된 jQuery 생성 */
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 =args.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();
// 현재 항목을 먼저 만듭니다. 각 요소의 marginTop을 초기 값으로 복원합니다.
first.css('margin-top', opts.orginal_marginTop 'px')// 방금 제거한 항목을 컨테이너 앞에 추가합니다.
$div.prepend (temp.hide());
}
temp.fadeIn(opts.interval - 50)// 다음 루프 트리거
setTimeout(_funSelf, opts.interval);
});
}
}, 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, //스크롤 시간 간격
방향: '아래', //스크롤 방향
항목: [{ //콘텐츠
title: 'ccav 스크롤 뉴스 1', //속성 제목
html: 'ccav 스크롤링 뉴스 1', //a's innerHTML
target: '_blank', //a's target
href: 'http://www.google.com.hk' //a's href
}, {
title: 'ccav 롤링 뉴스 2',
html: 'ccav 롤링 뉴스 2',
target: '_blank',
href: ' http://www .google.com.hk'
}, {
title: 'ccav Rolling News 3',
html: 'ccav Rolling News 3',
target: '_blank' ,
href : 'http://www.google.com.hk'
}, {
title: 'ccav Rolling News 4',
html: 'ccav Rolling News 4',
target: ' _blank',
href: 'http://www.google.com.hk'
}, {
title: 'ccav 롤링 뉴스 5',
html: ' ccav 롤링 뉴스 5' ,
타겟: '_blank',
href: 'http://www.google.com.hk'
}, {
title: 'ccav Rolling News 6' ,
html : 'ccav 롤링 뉴스 6',
대상: '_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