효과:
아이디어:
onmousemove 이벤트를 사용하여 마우스 좌표를 얻은 다음 DIV를 하나씩 탐색하고 마지막으로 마우스 좌표를 DIV에 할당합니다.
암호:
다음과 같이 코드 코드를 복사합니다.
<head runat="서버">
<제목></제목>
<스타일 유형="텍스트/css">
div
{
너비: 20px;
높이: 20px;
배경: #00FFFF;
위치: 절대;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
document.onmousemove = 함수(ev) {
var div = document.getElementsByTagName('div');
var oEvent = ev || 이벤트 확인
var pos = GetMouse(oEvent); //호환성 판단 후 마우스 좌표 이동 기능을 이용하여 수평, 수직 좌표 획득
for (var i = div.length - 1; i > 0; i--) { //마지막 DIV부터 시작하여 DIV를 트래버스합니다.
div[i].style.left = div[i - 1].offsetLeft + 'px'; //이전 offsetLeft를 다음 오프셋에 부여합니다.
div[i].style.top = div[i - 1].offsetTop + 'px'; //이전 offsetTop을 다음 항목에 부여합니다.
}
div[0].style.left = pos.x + 'px'; //마우스의 가로좌표를 첫 번째에 부여합니다.
div[0].style.top = pos.y + 'px'; //마우스의 수직 좌표를 첫 번째에 부여합니다.
}
function GetMouse(ev) { //마우스 이동 좌표를 가져옵니다.
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
}
</script>
</head>
<본문>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>