SetTimeout과 ClearTimeout을 이용한 한줄메세지 예제이다.
chk 값을 이용하여 메세지가 rolling 될지의 여부를 판단하도록 한다.
<![CDATA[<style type="text/css">
div,ul,li {margin:0;padding:0;}
.oneline-talk {overflow:hidden;border:2px solid #e8e8e8;padding:5px;}
.oneline-talk ul {height:18px;overflow:hidden;}
.oneline-talk li {font-size:12px;line-height:18px;cursor:pointer;}
.oneline-talk .talk-direction {float:right;margin-top:-18px;}
</style>
<script type="text/javascript">
function talkAutoChg(boxid,chk) {
if(chk) talkTimer=setTimeout('talkRoll("'+boxid+'",'+chk+')',2000);
else clearTimeout(talkTimer);
}
function talkRoll(boxid,chk) {
var talkList=document.getElementById(boxid).getElementsByTagName("li");
talkList[0].parentNode.appendChild(talkList[0]);
if(chk) talkTimer=setTimeout('talkRoll("'+boxid+'",'+chk+')',2000);
else clearTimeout(talkTimer);
}
function talkListMove(boxid,direction) {
var talkList=document.getElementById(boxid).getElementsByTagName("li");
if (direction == 'up') {
talkList[0].parentNode.insertBefore(talkList[talkList.length-1],talkList[0]);
} else {
talkList[0].parentNode.appendChild(talkList[0]);
}
}
</script>
<div class="oneline-talk">
<ul id="oneTalkList" onmouseover="talkAutoChg('oneTalkList',0);"
onmouseout="talkAutoChg('oneTalkList',1);">
<li>작성자닉네임 : 도서관 앞 잔디밭!!1 / 작성자닉네임 : 홍대앞 머시기…</li>
<li>작성자닉네임 : 도서관 앞 잔디밭!!2 / 작성자닉네임 : 홍대앞 머시기…</li>
<li>작성자닉네임 : 도서관 앞 잔디밭!!3 / 작성자닉네임 : 홍대앞 머시기…</li>
<li>작성자닉네임 : 도서관 앞 잔디밭!!4 / 작성자닉네임 : 홍대앞 머시기…</li>
</ul>
<div class="talk-direction">
<a href="#" onclick="talkListMove('oneTalkList','up');return false;">[up]</a>
<a href="#" onclick="talkListMove('oneTalkList','dn');return false;">[down]</a>
</div>
</div>
<script type="text/javascript">var talkTimer=0;talkAutoChg('oneTalkList',1);</script>
]]>