마우스를 움직일 때마다 마우스 커서가 움직인다?
이미지를 사용하지 않고 마우스 커서에 애니메이션 효과를 줄 수 있다. 인터넷 익스플로러 5 이상에서만 동작한다. 현재 페이지의 마우스 커서에서 이 효과를 이미 확인할 수 있을 것이다.
사용 방법은 간단하다.
아래 스크립트를 <head>와 </head> 태그 사이에 넣어주면 된다.
<script>
var nCursor=0
var arrCursors=new Array("e-resize","ne-resize","n-resize","nw-resize","w-resize","sw-resize","s-resize","se-resize")
var isIE5=document.getElementById&&document.all
function fnAnimateCursor() {
document.body.style.cursor=arrCursors[nCursor]
nCursor++
if (nCursor>=arrCursors.length-1) {nCursor=0}
}
function fnResetCursor() {
bMouseMove==false
if (!bMouseMove) {
document.body.style.cursor="crosshair"
}
var timer=setTimeout("fnResetCursor()",500)
}
if (isIE5) {
document.onmousemove=fnAnimateCursor
}
</script>
위 소스코드를 간단히 살펴보면, 우선 onmousemove 이벤트, 즉 마우스를 움직일 때 발생하는 이벤트를 가로채서 fnAnimateCursor란 사용자 정의 함수가 실행되게 한다. 이 함수에서는 arrCursors란 배열의 값을 하나씩 읽어들여 차례대로 마우스 커서의 스타일을 변경한다. arrCursors 배열의 값엔 "e-resize", "ne-resize"...등의 값이 들어 있는데 이 값들은 각각 e는 east, ne는 north-east, n은 north, nw는 north-west 등 각 동서남북의 값을 가리킨다. 즉 리사이즈 커서 모양이 동쪽에서(e-resize) 남동쪽으로(se-resize) 움직여 가는 것처럼 보이는 것이다.
이미지를 사용하지 않고 마우스 커서에 애니메이션 효과를 줄 수 있다. 인터넷 익스플로러 5 이상에서만 동작한다. 현재 페이지의 마우스 커서에서 이 효과를 이미 확인할 수 있을 것이다.
사용 방법은 간단하다.
아래 스크립트를 <head>와 </head> 태그 사이에 넣어주면 된다.
<script>
var nCursor=0
var arrCursors=new Array("e-resize","ne-resize","n-resize","nw-resize","w-resize","sw-resize","s-resize","se-resize")
var isIE5=document.getElementById&&document.all
function fnAnimateCursor() {
document.body.style.cursor=arrCursors[nCursor]
nCursor++
if (nCursor>=arrCursors.length-1) {nCursor=0}
}
function fnResetCursor() {
bMouseMove==false
if (!bMouseMove) {
document.body.style.cursor="crosshair"
}
var timer=setTimeout("fnResetCursor()",500)
}
if (isIE5) {
document.onmousemove=fnAnimateCursor
}
</script>
위 소스코드를 간단히 살펴보면, 우선 onmousemove 이벤트, 즉 마우스를 움직일 때 발생하는 이벤트를 가로채서 fnAnimateCursor란 사용자 정의 함수가 실행되게 한다. 이 함수에서는 arrCursors란 배열의 값을 하나씩 읽어들여 차례대로 마우스 커서의 스타일을 변경한다. arrCursors 배열의 값엔 "e-resize", "ne-resize"...등의 값이 들어 있는데 이 값들은 각각 e는 east, ne는 north-east, n은 north, nw는 north-west 등 각 동서남북의 값을 가리킨다. 즉 리사이즈 커서 모양이 동쪽에서(e-resize) 남동쪽으로(se-resize) 움직여 가는 것처럼 보이는 것이다.
반응형
'홈페이지 제작 > JavaScript' 카테고리의 다른 글
| 중복없는 무작위 숫자만들기 (로또복권) (0) | 2004.08.11 |
|---|---|
| 숫자관련 함수 (0) | 2004.08.11 |
| 큰 이미지 게시판크기에 맞게 자동으로 사이즈 줄여주기 (0) | 2004.04.20 |
| 흔들흔들 텍스트로 홍보해보세요 (0) | 2004.04.20 |
| 파일 업로드시 파일 확장명 구별하여 받기 (0) | 2004.01.06 |
