스크롤바를 내가 원하는 형식으로 바꿔서 사용하면 얼마나 재미있을까?
스크롤바의 위, 아래 화살표를 임의로 바꿔 사용하는 것은 생각보다 그리 어렵지가 않다. 글상자 하단에 스크롤바 위, 아래 화살표를 만든 다음 예제를 살펴보자. 마우스로 '위' '아래' 화살표에 커서를 갖다 대면 자동으로 스크롤-업, 스크롤-다운하는 것을 볼 수 있을 것이다. (인터넷 익스플로러와 넷스케이프 6 이상에서 사용할 수 있음)
이 예제에서는 글 상자를 만들기 위해 <div> 태그를 사용하였다. 글 내용을 담을 컨테이너 역할을 할 div와 콘텐츠 자체를 담을 div를 각각 따로 설정하였다. 우선 글 상자가 들어가는 부분에 대한 소스코드를 보자.
<div id="myContainer" style="position:relative;width:420px;height:160px;border:1px dotted black;overflow:hidden"> |
위 소스코드를 보면 myContainer 객체의 overflow 속성을 hidden으로 줬다. 그 이유는 글 내용이 글 상자의 영역을 벗어날 경우 글 내용이 보이지 않게 하기 위해서다.
스크롤바의 위, 아래 화살표 부분에 대한 소스코드는 다음과 같다.
<div style="width:420px;text-align:right"> |
스크롤바 위, 아래 화살표 이미지는 임의로 자신이 만든 것을 사용해도 상관없다. 이 이미지에 대한 링크 이벤트에서 onMouseover와 onMouseout 이벤트에 각각 사용자 함수를 할당하였다.
이제 이 함수를 비록한 자바스크립트 코드를 살펴 보자.
<script language="JavaScript1.2"> //스크롤 속도 (이 값이 크면 클 수록 속도가 빠름) var objContent=document.getElementById? document.getElementById("myContent") : document.all.myContent |
위 화살표에 마우스를 갖다 대면 moveup() 함수가, 아래 화살표에 마우스를 갖다 대면 movedown()함수가 실행된다. 마우스를 갖다 대는 동안 자동으로 스크롤이 될 수 있도록 setTimeout() 함수를 이용하여 자동 함수 호출이 되게 했다. movedown()과 moveup() 함수의 기능은 콘텐츠 영역(myContent 객체)의 위치를 위 아래로 이동 시켜주는 역할이다. 이 때 이동 폭을 사용자가 조정할 수 있도록 speed란 변수를 두어 그 변수 값 만큼 이동하게 되어있다.
자신의 환경에 맞게 배경색, 글상자의 폭, 스크롤 폭, 위/아래 화살표 이미지 등을 조절하여 사용하면 멋진 결과를 얻을 수 있을 것이다. 아래 스크립트 실행 창에서 해당 소스 코드를 수정하여 다양한 테스트를 해보기 바란다.
====================================================
<html>
<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
//스크롤 속도 (이 값이 크면 클 수록 속도가 빠름)
var speed=5
</script>
<div id="myContainer" style="position:relative;width:420px;height:160px;border:1px dotted black;overflow:hidden">
<div id="myContent" style="position:absolute;width:380px;left:20;top:20">
<!--원하는 콘텐츠를 삽입하는 공간-->
<p>진정한 유머는 독서와 사색을 통해 쌓은 교양과 자신의 삶을 관조할 수 있는 여유에서 나오는 것 같습니다.</p>
<p>'유머가 있는 사람'과 '웃기는 이야기를 많이 아는 사람'은 다르다고 합니다.
인터넷 사이트나 유머 책자에 있는 짧은 우스운 글들을 여러개 외우고 있다고해서 그를 유머가 풍부하다고 하지는 않는다는 얘기지요.</p>
<p>유교 문화속에서 엄숙주의가 지배했던 한국사회도, 어느새 유머가 리더의 중요한 자질중의 하나로 간주되는, 그런 분위기로 바뀌고 있습니다.
크던 작던 한 조직의 리더가 되려면 유머감각을 갖추려는 노력을 해야하는 상황입니다.</p>
<p>저는 레이건을 그의 정책이나 이념을 떠나서 개인적으로 대단한 사람이라고 생각합니다.
저격범 힝클리의 총에 맞아 쓰러진 급박한 상황.
생명을 잃을 수도 있는 그 상황에서, 수술실로 들어가면서 의사들에게 유머를 구사할 수 있는 '여유'가 그에게는 있었습니다.</p>
<p>공화당 출신의 대통령이었던 그는 그 위급한 상황에서도 의사들에게 "당신들 설마 민주당원은 아니겠지?"라고 조크를 던졌습니다.</p>
<!--콘텐츠 삽입 끝-->
</div>
</div>
<div style="width:420px;text-align:right">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img
src="http://korea.internet.com/images/scrollUp.gif" border=0></a> <a href="#" onMouseover="movedown()"
onMouseout="clearTimeout(movedownvar)"><img src="http://korea.internet.com/images/scrollDown.gif" border=0></a></div>
<script language="JavaScript1.2">
var objContent=document.getElementById? document.getElementById("myContent") : document.all.myContent
var objContentHeight=objContent.offsetHeight
function movedown(){
if (parseInt(objContent.style.top)>=(objContentHeight*(-1)+100))
objContent.style.top=parseInt(objContent.style.top)-speed+"px"
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if (parseInt(objContent.style.top)<=0)
objContent.style.top=parseInt(objContent.style.top)+speed+"px"
moveupvar=setTimeout("moveup()",20)
}
function getContentHeight(){
objContentHeight=objContent.offsetHeight
}
window.onload=getContentHeight
</script>
</body>
</html>
'프로그래밍Tips' 카테고리의 다른 글
| 글상자, Select 박스,등의 여러 요소들을 특정 지정 영역에서만 움직이게 하기... (2) | 2005.09.23 |
|---|---|
| 오라클 주요 SQL명령 & 산술함수 (0) | 2005.09.22 |
| 오라클 설치 후 작업들 몇가지...한글설정, 환경변수, 암호변경, 기본생성정보 (0) | 2005.09.22 |