마우스 올라오면 글자가 눌러진 듯한 효과 만들기

※ 내용 업데이트와 홈페이지 관리 다시 시작하겠습니다. ^^;

스크립트 한 줄로 글자가 눌려진 듯한 효과를 내는 예제입니다.
스타일 태그의 속성값을 자바스크립트로 바꾸는 방식으로 작동합니다.

스타일 속성에 position:relative 를 넣어 주어야 합니다.

예제

여기에 마우스를 올려 보세요

소스

<p align="center" style="position:relative" onmouseout="this.style.posLeft -=1;this.style.posTop -=1" onmouseover="this.style.posLeft +=1;this.style.posTop +=1">여기에 마우스를 올려 보세요</p>

<p align="center" style="position:relative" onmouseout="this.style.posLeft -=1;this.style.posTop +=1" onmouseover="this.style.posLeft +=1;this.style.posTop -=1">여기에 마우스를 올려 보세요</p>

<p align="center" style="position:relative" onmouseout="this.style.posTop -=1" onmouseover="this.style.posTop +=1">여기에 마우스를 올려 보세요</p>

<p align="center" style="position:relative" onmouseout="this.style.posLeft -=1;this.style.posTop -=1" onmouseover="this.style.posLeft +=1;this.style.posTop +=1">여기에 마우스를 올려 보세요</p>

<p align="center" style="position:relative" onmouseout="this.style.posLeft -=1;this.style.posTop +=1" onmouseover="this.style.posLeft +=1;this.style.posTop -=1">여기에 마우스를 올려 보세요</p>

<p align="center" style="position:relative" onmouseout="this.style.posTop -=1" onmouseover="this.style.posTop +=1">여기에 마우스를 올려 보세요</p>

☞ 달팽이홈2

등록일 : 2008-07-05