지난번 자바스크립트 스크롤 한줄 공지를 vticker.js 를 이용하여 구현하였다.
왠걸
이번에도 세줄 공지 스크롤 디자인이 넘어와서 파라미터만 바꿔주면 되겟거니했지만...
vticker.js 기본적으로 ul 테두리 안에서 li 태그를 롤링 할때만 가능 해서 디자인이 다깨짐..
그래서 vtiker.js 의 모든 기능을 사용하면서 추가적으로 테두리와 롤링될 엘리먼트를 설정 할수 있는 기능을 추가함.
사용법
html 구조
<div id="rollingExchangeBox">
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
.
.
.
</div>
</div>
rollingExchangeBox div 내부 div 에서 ul 을 롤링 시킴.
$('#rollingExchangeBox').vTicker({
speed : 1000 //애니메이트 스피드
,pause : 2000 //애니메이트 완료후 정지 시간
,showItems : 3 //보여줄 아이템 개수
,mousePause: true //마우스 오버시 롤링 포즈
,height : 120 //껍데기 높이
,parentSelector : "div" //껍데기 엘리먼트
,childrenSelector : "ul" //롤링될 엘리먼트
});
보면 옵션으로 parentSelector 값과 childrenSelector 값을 설정 할 수 있다.
테이블일 경우는
,parentSelector : "tr" ,childrenSelector : "td" 식으로 값을 주면된다.
그밖에 모든 엘리먼트가 사용가능 하다 div 안에서 a 태그를 롤링 한다던가.. 뭐 기타 등등
값을 입력 하지않을 경우 기본 div 안에서 ul 를 롤링하도록 되어있다. 나머지 옵션들은
기존 vtiker.js 사용법과 동일하다.
스크립트 파일을 소스내용
/*
Vertical News Ticker 1.21
Original by: Tadas Juozapaitis ( kasp3rito [eta] gmail (dot) com )
https://github.com/kasp3r/vTicker
Forked/Modified by: Richard Hollis @richhollis - richhollis.co.uk
customized : 김태경
*/
(function($) {
var defaults, internal, methods;
//기본 변수값.
defaults = {
speed: 700,
pause: 4000,
showItems: 1,
mousePause: true,
height: 0,
animate: true,
margin: 0,
padding: 0,
startPaused: false,
autoAppend: true,
parentSelector : "div", /*커스터 마이징 추가*/
childrenSelector : "ul" /*커스터 마이징 추가*/
};
internal = {
moveUp: function(state, attribs) {
return internal.showNextItem(state, attribs, 'up');
},
moveDown: function(state, attribs) {
return internal.showNextItem(state, attribs, 'down');
},
nextItemState: function(state, dir) {
var height, obj;
obj = state.element.children(state.pselector);
height = state.itemHeight;
if (state.options.height > 0) {
height = obj.children(state.cselector + ':first').height();
}
height += state.options.margin + state.options.padding * 2;
return {
height: height,
options: state.options,
el: state.element,
obj: obj,
selector: dir === 'up' ? state.cselector + ':first' : state.cselector + ':last',
dir: dir
};
},
showNextItem: function(state, attribs, dir) {
var clone, nis;
nis = internal.nextItemState(state, dir);
nis.el.trigger('vticker.beforeTick');
clone = nis.obj.children(nis.selector).clone(true);
if (nis.dir === 'down') {
nis.obj.css('top', '-' + nis.height + 'px').prepend(clone);
}
if (attribs && attribs.animate) {
if (!state.animating) {
internal.animateNextItem(nis, state);
}
} else {
internal.nonAnimatedNextItem(nis);
}
if (nis.dir === 'up' && state.options.autoAppend) {
clone.appendTo(nis.obj);
}
return nis.el.trigger('vticker.afterTick');
},
animateNextItem: function(nis, state) {
var opts;
state.animating = true;
opts = nis.dir === 'up' ? {
top: '-=' + nis.height + 'px'
} : {
top: 0
};
return nis.obj.animate(opts, state.options.speed, function() {
$(nis.obj).children(nis.selector).remove();
$(nis.obj).css('top', '0px');
return state.animating = false;
});
},
nonAnimatedNextItem: function(nis) {
nis.obj.children(nis.selector).remove();
return nis.obj.css('top', '0px');
},
nextUsePause: function() {
var options, state;
state = $(this).data('state');
options = state.options;
if (state.isPaused || internal.hasSingleItem(state)) {
return;
}
return methods.next.call(this, {
animate: options.animate
});
},
startInterval: function() {
var options, state;
state = $(this).data('state');
options = state.options;
return state.intervalId = setInterval((function(_this) {
return function() {
return internal.nextUsePause.call(_this);
};
})(this), options.pause);
},
stopInterval: function() {
var state;
if (!(state = $(this).data('state'))) {
return;
}
if (state.intervalId) {
clearInterval(state.intervalId);
}
return state.intervalId = void 0;
},
restartInterval: function() {
internal.stopInterval.call(this);
return internal.startInterval.call(this);
},
getState: function(from, elem) {
var state;
if (!(state = $(elem).data('state'))) {
throw new Error("vTicker: No state available from " + from);
}
return state;
},
isAnimatingOrSingleItem: function(state) {
return state.animating || this.hasSingleItem(state);
},
hasMultipleItems: function(state) {
return state.itemCount > 1;
},
hasSingleItem: function(state) {
return !internal.hasMultipleItems(state);
},
bindMousePausing: (function(_this) {
return function(el, state) {
return el.bind('mouseenter', function() {
if (state.isPaused) {
return;
}
state.pausedByCode = true;
internal.stopInterval.call(this);
return methods.pause.call(this, true);
}).bind('mouseleave', function() {
if (state.isPaused && !state.pausedByCode) {
return;
}
state.pausedByCode = false;
methods.pause.call(this, false);
return internal.startInterval.call(this);
});
};
})(this),
setItemLayout: function(el, state, options) {
var box;
el.css({
overflow: 'hidden',
position: 'relative'
}).children(state.pselector).css({
position: 'absolute',
margin: 0,
padding: 0
}).children(state.cselector).css({
margin: options.margin,
padding: options.padding
});
if (isNaN(options.height) || options.height === 0) {
el.children(options.parentSelector).children(options.childrenSelector).each(function() {
if ($(this).height() > state.itemHeight) {
return state.itemHeight = $(this).height();
}
});
el.children(options.parentSelector).children(options.childrenSelector).each(function() {
return $(this).height(state.itemHeight);
});
box = options.margin + options.padding * 2;
return el.height((state.itemHeight + box) * options.showItems + options.margin);
} else {
return el.height(options.height);
}
},
defaultStateAttribs: function(el, options) {
return {
itemCount: el.children(options.parentSelector).children(options.childrenSelector).length,
itemHeight: 0,
itemMargin: 0,
element: el,
animating: false,
options: options,
isPaused: options.startPaused,
pausedByCode: false,
pselector : options.parentSelector, // 롤링 시킬 부모 엘리먼트를 셋팅
cselector : options.childrenSelector // 실제 롤링되는 자식 엘리먼트 셋팅
};
}
};
methods = {
init: function(options) {
var clonedDefaults, el, state;
if (state = $(this).data('state')) {
methods.stop.call(this);
}
state = null;
clonedDefaults = jQuery.extend({}, defaults);
options = $.extend(clonedDefaults, options);
el = $(this);
state = internal.defaultStateAttribs(el, options); //사용자 함수 호출 시 정의된 옵션정보를 state 객체에 할당한다.
$(this).data('state', state);
internal.setItemLayout(el, state, options);
if (!options.startPaused) {
internal.startInterval.call(this);
}
if (options.mousePause) {
return internal.bindMousePausing(el, state);
}
},
pause: function(pauseState) {
var el, state;
state = internal.getState('pause', this);
if (!internal.hasMultipleItems(state)) {
return false;
}
state.isPaused = pauseState;
el = state.element;
if (pauseState) {
$(this).addClass('paused');
return el.trigger('vticker.pause');
} else {
$(this).removeClass('paused');
return el.trigger('vticker.resume');
}
},
next: function(attribs) {
var state;
state = internal.getState('next', this);
if (internal.isAnimatingOrSingleItem(state)) {
return false;
}
internal.restartInterval.call(this);
return internal.moveUp(state, attribs);
},
prev: function(attribs) {
var state;
state = internal.getState('prev', this);
if (internal.isAnimatingOrSingleItem(state)) {
return false;
}
internal.restartInterval.call(this);
return internal.moveDown(state, attribs);
},
stop: function() {
var state;
state = internal.getState('stop', this);
return internal.stopInterval.call(this);
},
remove: function() {
var el, state;
state = internal.getState('remove', this);
internal.stopInterval.call(this);
el = state.element;
el.unbind();
return el.remove();
}
};
return $.fn.vTicker = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
}
return $.error('Method ' + method + ' does not exist on jQuery.vTicker');
};
})(jQuery);
소스코드를 분석해보면 알겟지만 기존 ul li 하드 코딩으로 박혀 있던 부분이
pselector(부모) cselector(자식) 변수로 받아서 돌아가게끔 변겨되어있다.
2시간 걸림 필요하신분 가져가실때 댓글좀 달아주세요!!!!!~
댓글 없음:
댓글 쓰기