롤링 스크립트
페이지 정보
작성자 서방님 댓글 0건 조회 149회 작성일 12-06-01 16:39본문
대게 실시간 검색어를 표시하는 용도로 쓰이는 롤링 스크립트이다.
DIV 블럭으로 쌓은 UL 태그로 마크업을 작성한 후에 script 를 호출하면, 한줄로 롤링되는 전광판 형태로 구현이 가능하다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.rolling_list_area { position:relative; overflow:hidden; }
.rolling_list_area ul, .rolling_list_area ol { position:absolute; padding:0; margin:0; }
</style>
<script type="text/javascript">
// <![CDATA[
/**
*
* RollingList by byuli
*
* Parameters
* id : dome Element ID, tagType : ul & ol 태그 명시, liHeight : 텍스트의 높이,
* gabSpeed : 정지해 있는 시간, rollSpeed : 롤링되는 시간, startspeed : 롤링이 시작되는 시간.
*
*/
var RollingList = function (id, tagType, liHeight, gabSpeed, rollSpeed, startspeed)
{
var listObj = document.getElementById(id);
var nowCnt = 0;
var movingCnt = 0;
var maxCnt = 10;
this.init = function ()
{
try
{
listObj.className = "rolling_list_area";
}catch (e)
{
alert("'" + id + "' is not elements");
return;
}
listObj.style.height = liHeight + "px";
var t = setTimeout(listObj.id + ".seting()", startspeed);
}
this.seting = function ()
{
var ulObj = listObj.getElementsByTagName(tagType)[0];
var liObj = ulObj.getElementsByTagName("LI");
maxCnt = liObj.length;
ulObj.insertBefore(liObj[0].cloneNode(true), liObj[maxCnt-1].nextSibling);
if(maxCnt>0)
{
this.show();
}
}
this.show = function ()
{
if (maxCnt == nowCnt )
{
nowCnt = 0;
movingCnt = 0;
listObj.getElementsByTagName(tagType)[0].style.top = "0px";
}
nowCnt++;
var t = setTimeout(listObj.id + ".motion()", gabSpeed);
}
this.motion = function ()
{
movingCnt = movingCnt + 4;
if (movingCnt > (liHeight * nowCnt))
{
movingCnt = liHeight * nowCnt;
this.show();
}else
{
listObj.getElementsByTagName(tagType)[0].style.top= "-" + movingCnt + "px";
var t = setTimeout(listObj.id + ".motion()", rollSpeed);
}
}
}
// ]]>
</script>
</head>
<body>
<h1>
RollingList Script 사용 예제
</h1>
<h4>
ul 태그, 느리게
</h4>
<h5>
비적용
</h5>
<div>
<ul>
<li> 아자 테스트 해보자 </li>
<li> 뭐니 이건 뭐 뭐야 </li>
</ul>
</div>
<h5>
적용
</h5>
<div id="RollingTest">
<ul>
<li> 아자 테스트 해보자 </li>
<li> 뭐니 이건 뭐 뭐야 </li>
</ul>
</div>
<script type="text/javascript">
// <![CDATA[
var RollingTest = new RollingList("RollingTest", "ul", 18, 2000, 100, 1);
RollingTest.init();
// ]]>
</script>
<h4>
ol 태그, 빠르게
</h4>
<h5>
비적용
</h5>
<div>
<ol>
<li> 아자 테스트 해보자 </li>
<li> 뭐니 이건 뭐 뭐야 </li>
<li> 궁시렁 쿵닥닥 </li>
<li> 어쩌자고 그러니 </li>
<li> 넌 사랑이 뭐라고 생각하니 </li>
<li> 공상 중이야 </li>
<li> 흠 예쁘다 </li>
<li> 마음씨가 고와 </li>
</ol>
</div>
<h5>
적용
</h5>
<div id="RollingTest2">
<ol>
<li> 아자 테스트 해보자 </li>
<li> 뭐니 이건 뭐 뭐야 </li>
<li> 궁시렁 쿵닥닥 </li>
<li> 어쩌자고 그러니 </li>
<li> 넌 사랑이 뭐라고 생각하니 </li>
<li> 공상 중이야 </li>
<li> 흠 예쁘다 </li>
<li> 마음씨가 고와 </li>
</ol>
</div>
<script type="text/javascript">
// <![CDATA[
var RollingTest2 = new RollingList("RollingTest2", "ol", 18, 1000, 30, 1);
RollingTest2.init();
// ]]>
</script>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
