Window status scroll

Go Scroll

브라우저의 status 상자에 어떤 문자들을 이동 시킵니다. 안내말이나 인사말을 넣어주고 이동하면 alert창으로 하는것과 비교하여 사용자가 마우스를 사용하지 않아도 되어서 좀 더 편하고 alert창은 오작동할 여지가 있기 때문에 어떤 안내문을 사용자에게 보여줄 때는 이것이 나은 방법입니다. 다만, 시각적인 면에서는 폼의 text에 넣어 주는게 좋습니다.

content = "      Window Status Scroll...    안녕하세요....?";

이 줄은 보여줄 말입니다. 안내말의 길이에 따라서 알맞게 편집하면 됩니다. 함수에서 이것을 참조하고 수정을 해야하므로 외부변수로 선언합니다.

function statusScroll() { 
   if ( self.ID ) clearTimeout(ID);
      if ( !flag ) {
         content = content.substring(1)+content.substring(0, 1);
         window.status = content;
         ID = setTimeout("statusScroll()", 111);
      }
      else flag = false
}

문자들을 이동시키는 함수입니다. content 외부변수에 저장되어 있는 문자를 다룹니다. 외부변수 flag가 true가 될때까지 문자들을 이동시킵니다. 사용자가 링크로 flag값을 true로 만들면 이동을 멈춥니다.

content = content.substring(1)+content.substring(0, 1);

content의 문자 중에서 2번째 문자부터 끝까지의 문자를 content 변수에 앞으로 이동하고 첫번째의 문자를 맨 뒤로 이동합니다. 그러면 글자들이 이동하는 효과가 나옵니다.

if ( self.ID ) clearTimeout(ID);

는 사용자의 반응에 따라서 글자를 이동하는 statusScroll() 함수를 실행시 두번 이상 이 함수를 호출하면 속도가 두 배가 됩니다. 3번 실행하면 3배의 속도가 됩니다. 이것은 두 번째 함수를 실행하면 첫번째의 ID를 정지합니다. 그래서 두번째의 호출은 처음으로 호출하는 것이 됩니다. 따라서 사용자의 행동에 상관없이 일정한 시간을 유지시켜 줍니다. 여기서 뿐만이 아니라 사용자의 행동에 따라서 setTimeout() 함수를 호출할 때 이것을 넣어주면 일정한 시간을 유지할 수 있습니다.

function stopScroll() {
	flag = true;
	content = "   Window Status Scroll...    안녕하세요....?";
}

문자들의 이동을 멈추는 함수입니다. 외부변수 flag에게 true값을 지정합니다. 그리고 content에 처음과 같은 문자를 넣어주면 똑같이 보여줍니다.

<a href="javascript:statusScroll()">Scroll Start</a> 
<a href="javascript:void(0)" onClick="stopScroll()">Scroll Stop</a>

시작과 정지를 두 개의 링크로 지정합니다.

function statusScroll() { 
   if ( self.ID ) clearTimeout(ID);
      if ( !flag ) {
         content = content.substring(1)+content.substring(0, 1);
         window.status = content;
         ID = setTimeout("statusScroll()", 111);
      }
      else flag = false
}
function stopScroll() {
   flag = true;
   content = "    Window Status Scroll...   안녕하세요....?";
}
var flag = false;
var content = "     Window Status Scroll...   안녕하세요....?";
--
<a href="javascript:statusScroll()">Scroll Start</a> 
<a href="javascript:void(0)" onClick="stopScroll()">Scroll Stop</a>

전체 소스입니다.

Scroll Start
Stop

--
폼의 text 상자에서도 비슷합니다.
window.status 대신에 document.formName.textName.value 를 사용하면 됩니다.

TOP