[jQuery] 상하롤링, 위아래 롤링

공지사항을 노출하기 위해 자주 사용하는 상하롤링, 위아래 롤링의 간단한 사용법 입니다.
소스 내용에 설명있으니 참조해서 사용하시면 됩니다.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
	.notice{width:100%; height:50px; overflow:hidden;}
	.rolling{position:relative; width:100%; height:auto;}
	.rolling li{width:100%; height:50px; line-height:50px;}
</style>
<script>
$(document).ready(function(){
	var height =  $(".notice").height(); //공지사항의 높이값을 구해주고~~
	var num = $(".rolling li").length; // 공지사항의 개수를 알아볼수 있어요! length라는 것으로!
	var max = height * num; //그렇다면 총 높이를 알 수 있겠죠 ?
	var move = 0; //초기값을 설정해줍니다.
	function noticeRolling(){
		move += height; //여기에서 += 이라는 것은 move = move + height 값이라는 뜻을 줄인 거에요.
		$(".rolling").animate({"top":-move},600,function(){ // animate를 통해서 부드럽게 top값을 올려줄거에요.
			if( move >= max ){ //if문을 통해 최대값보다 top값을 많이 올렸다면 다시 !
				$(this).css("top",0); //0으로 돌려주고~
				move = 0; //초기값도 다시 0으로!
			};
		});
	};
	noticeRollingOff = setInterval(noticeRolling,3000); //자동롤링답게 setInterval를 사용해서 1000 = 1초마다 함수 실행!!
	$(".rolling").append($(".rolling li").first().clone()); //올리다보면 마지막이 안보여서 clone을 통해 첫번째li 복사!

	$(".rolling_stop").click(function(){
		clearInterval(noticeRollingOff); //stop을 누르면 clearInterval을 통해 자동롤링을 해제합니다.
	});
	$(".rolling_start").click(function(){
		noticeRollingOff = setInterval(noticeRolling,1000); //다시 start를 누르면 자동롤링이 실행하도록 !!
	});
});
</script>
<div class="notice-block">
	<span>NOTICE</span>
	<div class="notice">
		<ul class="rolling">
			<li><a href="#" class="link">[공지] 공지1 알려드립니다.</a></li>
			<li><a href="#" class="link">[공지] 공지2 알려드립니다.</a></li>
		</ul>
	</div>
</div>