풍선 도움말 3 | ../ |
"글자이동 풍선 도움말" 사용한 STYLE은 아래입니다.
<style>
#D1 {
position:absolute; left:0; top:0;
width:300; height:50; clip:rect(0,300,50,0);
background-color:yellow;
layer-background-color:yellow;
visibility:hidden;
}
#S1 { position:absolute; left:0; top:30; width:300; padding:5; }
</style>
<div id=D1>
<div id=S1>
-------------------------------<br>
이것은 풍선 도움말입니다. <br><br>
글자들이 위로 이동하는 풍선입니다...<br>
----------------------------------
</div>
</div>
수직으로 이동시키기 위해서 상위 레이어의 크기와 clip값을 수평과는 조금 다른 값을 지정합니다.
원하는 값을 지정하면 될것입니다. 사용한 javaScript 구문은 scrollGo()함수 안에
left, pixelLeft 값을 모두 top, pixelTop으로 바꾸어 주고 글자들을 가지고 있는 레이어 'S1'의 크기를
나타내는 X.offsetHeight, X.document.height 로 바꾸어준 것이 다입니다.
나머지는 수평으로 이동시키는 것과 같습니다.
function scrollGo() {
if (n4) {
if ( X.top > (X.document.height * -1) ) {
X.top += -1
barron_ID = setTimeout("scrollGo()", 10);
}
else {
X.top=40;
scrollGo();
}
}
else {
if ( X.style.pixelTop > (X.offsetHeight * -1) ) {
X.style.pixelTop += -1
barron_ID = setTimeout("scrollGo()", 10);
}
else {
X.style.pixelTop = 40;
scrollGo();
}
}
}