Slide Ticker (Horizon)

1. 스크롤시킬 영역을 잡는다. 영역을 넘어서면 overflow:hidden 처리한다.
2. 스크롤 컨텐츠를 채워넣는다.
3. 스크롤 컨텐츠의 넓이값만큼 스크롤되면 컨텐츠를 재배치한다.

<style type="text/css"> div,ul,li {margin:0;padding:0;font:12px "Malgun Gothic";} ul {list-style:none;} #testBox { position:relative; border:1px solid #000; width:300px; height:20px; background:#eee; overflow:hidden; } #test {height:18px;position:absolute;left:0;top:0;} #test li {float:left;width:100px;} </style> <script type="text/javascript"> function s_init() { var msgBox = document.getElementById("test"); var msgList = document.getElementById("test").getElementsByTagName("li"); var gap = 2; // 이동거리 var delay = 20 // 이동속도(ms) // 지나간 컨텐츠를 맨뒤로 이동시키기위해 넓이에 맞춰 이동거리를 배수로 맞춘다. while ((msgList[0].offsetWidth % gap) != 0) { gap--; } msgBox.style.width = msgList.length * msgList[0].offsetWidth + "px"; s_Left(gap,delay); } function s_Left(gap,delay) { var msgBox = document.getElementById("test"); var msgList = document.getElementById("test").getElementsByTagName("li"); var objw = msgList[0].offsetWidth; msgBox.style.left = parseInt(msgBox.style.left) - gap + "px"; // 지나간 컨텐츠를 맨뒤로 이동시켜 재배치한다. if (parseInt(msgBox.style.left) == -parseInt(objw) ) { msgBox.style.left = '0px'; msgBox.appendChild(msgList[0]); } setTimeout('s_Left('+gap+','+delay+')',delay); } </script> <div id="testBox"> <ul id="test" style="left:0;"> <li>내용1</li> <li>내용2</li> <li>내용3</li> <li>내용4</li> <li>내용5</li> </ul> </div> <script type="text/javascript">s_init();</script>