[jQuery] Scroll Up Headline Reader
출처 : http://www.learningjquery.com/2006/10/scroll-up-headline-reader
사이트 오픈이 코 앞인데 아직도 코딩 작업을 하고 있으니.. 정말 큰 일이 아닐 수 없다. 이래서는 안되는데..
어쨌든 사이트 작업을 하다 보니 공지사항의 제목을 사이트 상단에 보여줘야 하는데 이때 위로 스크롤링이 되어야
하기 때문에 이미 만들어진 소스가 있긴 하지만 jQuery로 간단하게 만들 수 있지 않을까 하는 생각에 무조건 도전..
다행히 이미 만들어둔 코드가 있어서 그걸 참고해서 무사히 해결할 수 있었다.
우선 작업을 하기 전에 CSS를 추가해줘야 한다.
#scrollup_icon { float: left; width: 54px; }
.headline { position: absolute; top: 40px; left: 5px; width:440px; white-space: nowrap; overflow: hidden; }
<div id=”scrollup”>
<div class=”headline”>반포 자이 아파트 32평형 시공비 30% 할인 10가구 한정 – 도원종합장식</div>
<div class=”headline”>반포 자이 아파트 32평형 시공비 30% 할인 10가구 한정</div>
<div class=”headline”>반포 자이 아파트 32평형</div>
</div>
다음은 스크롤링 부분을 처리하는 스크립트이다.
// 탑이벤트 스크롤UP
var headline_count;
var headline_interval;
var old_headline = 0;
var current_headline = 0;
$(document).ready(function(){
headline_count = $(“div.headline”).size();
$(“div.headline:eq(“+current_headline+”)”).css(‘top’,’3px’);
headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
$(‘#scrollup’).hover(function() {
clearInterval(headline_interval);
}, function() {
headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
headline_rotate();
});
});
function headline_rotate() {
current_headline = (old_headline + 1) % headline_count;
$(“div.headline:eq(” + old_headline + “)”).animate({top: -35},”slow”, function() {
$(this).css(‘top’,’40px’);
});
$(“div.headline:eq(” + current_headline + “)”).show().animate({top: 3},”slow”);
old_headline = current_headline;
}
</script>
요정도의 코드로 간단하게 jQuery를 이용해서 위로 스르콜링 되는 부분을 만들었다.