javascript 슬라이드 배너 만들기

자바스크립트 퀵메뉴를 만들어보자.

<div id="slideBanner"></div>

<script>

//슬라이드 배너

var bannerVer, initTop, velocity, slideBanner;

var acceleration = 50;

var initTop = 170;

function moveTab() {

  slideBanner = document.getElementById('slideBanner');

  bannerVer = document.body.scrollTop+initTop;

  velocity = Math.ceil(Math.abs(slideBanner.style.posTop-bannerVer)/acceleration);

  

  if(slideBanner.style.posTop<bannerVer) i = velocity;

  else if(slideBanner.style.posTop == bannerVer) i = 0;

  else i = -velocity;

  slideBanner.style.posTop += i;

  setTimeout(moveTab, 1);

}

moveTab();

</script>

위 코드는 순수 자바스크립트 코드이지만,

jquery를 이용해서 코딩하면 훨씬 간단히 구현할 수 있다.