text rolling 맛보기 - using javascript.
ITWeb/개발일반 2011. 12. 6. 16:09[기능]
- 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 효과를 주실 수 있습니다.