티스토리 뷰
- 스크롤시킬 영역을 잡는다. 영역을 넘어서면 overflow:hidden 처리한다.
- 스크롤 컨텐츠를 채워넣는다.
- 스크롤 컨텐츠의 넓이값만큼 스크롤되면 컨텐츠를 재배치한다.
<![CDATA[<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>
]]>
« 2024/05 »
| 일 |
월 |
화 |
수 |
목 |
금 |
토 |
| |
|
|
1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
9 |
10 |
11 |
| 12 |
13 |
14 |
15 |
16 |
17 |
18 |
| 19 |
20 |
21 |
22 |
23 |
24 |
25 |
| 26 |
27 |
28 |
29 |
30 |
31 |
|
