'text rolling'에 해당되는 글 1건

  1. 2011.12.06 text rolling 맛보기 - using javascript.

text rolling 맛보기 - using javascript.

ITWeb/개발일반 2011.12.06 16:09
text rolling 만들어 달라고 해서 아주 쉽게 만든 코드로 맛보기를 해보겠습니다.

[기능]
- Text Replace : 2개로 replace (swap 아님)
- Text Rolling : 2개만 사용 (응용은 알아서.. ㅎㅎ)
- CSS 는 무식하게 inline style 사용

[사용된 함수]
- window.setInterval
- parseInt
- document.getElementById

[설명]
- textReplace() 는 말 그대로 Text Array1, 2 를 번갈아 가면서 보여 주는 역할
- textRolling() 은 말 그대로 Text Array1, 2가 height 의 1/2 간격으로 윗쪽으로 rolling 되는 역할 (빨간색 참고)

[예제코드]

<!DOCTYPE html>

<html>

<head>

<title>Text Rolling</title>

<script type="text/javascript">
var textArr = ['Text Array1', 'Text Array2']; 

var textIdx = 0;

var timer = null;

var height = 48;


function textReplace() {

var obj = document.getElementById('adWrap');

obj.innerText = textAd[textIdx];

if ( textIdx == 0 ) {

textIdx = 1;

} else {

textIdx = 0;

}

}


function runTextReplace() {

window.setInterval('textReplace();', 2000);

}


function textRolling() {

var obj1 = document.getElementById('textWrap1');

var obj2 = document.getElementById('textWrap2');

if ( parseInt(obj1.style.top) == -(height) ) {

obj1.style.top = (height*2) + 'px';

} else {

obj1.style.top = (parseInt(obj1.style.top) - 1) + 'px';

}

if ( parseInt(obj2.style.top) == -(height*2) ) {

obj2.style.top = height + 'px';

} else {

obj2.style.top = (parseInt(obj2.style.top) - 1) + 'px';

}

}


function runTextRolling () {

timer = window.setInterval('textRolling();', 50);

}


</script>

</head>

<body style='margin:0px; padding:0px;' topmargin='0px'  leftmargin='0px' marginheight='0px' marginwidth='0px'>

<div id='textWrap' style='width:320px; height:48px; line-height:48px; background-color:#000000; valign:center; color:#FFFFFF; text-align:center'>

</div>

<button onclick='runTextReplace();'>Text Replace Run</button>

<br>

<div id='boxWrap' style='width:320px; height:48px; line-height:48px; background-color:red; valign:center; color:#FFFFFF; text-align:center'>

<div id='textWrap1' style='position:relative; top:0px; left:0px; width:320px; height:48px; line-height:48px; background-color:#000000; valign:center; color:#FFFFFF; text-align:center'>

Text Array1

</div>

<div id='textWrap2' style='position:relative; top:24px; left:0px; width:320px; height:48px; line-height:48px; background-color:#000000; valign:center; color:#FFFFFF; text-align:center'>

Text Array2

</div>

</div>

<br><br><br><br>

<button onclick='runTextRolling();'>Text Rolling Run</button>

</body>

</html>



[지정 시간 동안 정지후 롤링]
- textRolling 함수에 아래 코드가 추가 되면 됩니다.

function textRolling() {

var obj1 = document.getElementById('textWrap1');

var obj2 = document.getElementById('textWrap2');

if ( parseInt(obj1.style.top) == -(height) ) {

obj1.style.top = (height*2) + 'px';

} else {

obj1.style.top = (parseInt(obj1.style.top) - 1) + 'px';

}

if ( parseInt(obj2.style.top) == -(height*2) ) {

obj2.style.top = height + 'px';

} else {

obj2.style.top = (parseInt(obj2.style.top) - 1) + 'px';

}

if ( parseInt(obj1.style.top) == 0 || parseInt(obj2.style.top) == -(height) ) {

window.clearInterval(timer);

window.setTimeout('runTextRolling();', 2000);

}

}


[간격 없이 Rolling 시키기]
- 위 코드의 예제는 특정 간격 만큼의 차이를 두고 rolling 시키는 예제 이고 아래는 간격 없이 바로 붙어서 동작함. 

function textRolling() {

var obj1 = document.getElementById('adWrap1');

var obj2 = document.getElementById('adWrap2');

obj1.style.top = (parseInt(obj1.style.top) - 1) + 'px';

obj2.style.top = (parseInt(obj2.style.top) - 1) + 'px';

if ( parseInt(obj1.style.top) == 0 || parseInt(obj2.style.top) == -(height) ) {

window.clearInterval(timer);

window.setTimeout('runTextRolling();', 2000);

if ( parseInt(obj1.style.top) == -(height) ) {

obj1.style.top = height + 'px';

}

if ( parseInt(obj2.style.top) == -(height*2) ) {

obj2.style.top = '0px';

}

}

}


<div id='textWrap2' style='position:relative; top:0px; left:0px; width:320px; height:48px; line-height:48px; background-color:#000000; valign:center; color:#FFFFFF; text-align:center'>

Text Array2

</div> 


※ 잘 아시겠지만 이미지도 <div> 안에 넣으시면 동일한 rolling 효과를 주실 수 있습니다. 
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
tags :
Trackback 0 : Comment 0

티스토리 툴바