[웹개발#8] javascript 공지사항 텍스트 세로 롤링

웹사이트 개발시, 페이지 어딘가에 공지사항을 보여주고 싶을 때 자주 사용하는 텍스트 세로 롤링 코드입니다.

이보다도 좀 더 부드럽게 롤링되는 걸 본 적이 있는데, 차후 수정할 수 있도록 해보겠습니다. 

 

<style type="text/css">
  .rolling {margin:0;padding:0;list-style:none;overflow:hidden;height:30px;}
  .rolling li {margin:0px;padding:0px;height:30px;}
</style>

<ul id="rolling_notice" class="rolling">
  <li><a href="#">Lorem ipsum dolor sit amet..</a></li>
  <li><a href="#">Lorem ipsum dolor sit amet, consectetur..</a></li>
  <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</a></li>
</ul>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
crossorigin="anonymous"></script>

<script type="text/javascript">
 function notice_scroll(){
  $('#rolling_notice li:first').slideUp( function () { 
  	$(this).appendTo($('#rolling_notice')).slideDown();
  });
 }
 setInterval(function(){notice_scroll()},3000);
</script>