Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

nkdk의 세상

JS :: 마우스커서를 따라다니는 이미지 본문

My Programing/HTML and JavaScript

JS :: 마우스커서를 따라다니는 이미지

nkdk 2008. 6. 16. 10:35

document.all
document.all은 브라우저종류를 걸러내거나(ie는 지원, nn은 미지원) html문서상의 모든 객체에 접근이 가능하게 합니다.
*document.all[객체명]은 document.all.객체명과 동일합니다.

<html>
<script language="JavaScript">
<!--

var img1 = new Array();
var j = 0;

for (i=6; i>=1; i--) {  // 이미지경로생성
img1[j] = "image/" + i + ".gif";
j = j + 1;
}

var nos = 6;  // 6개 이미지사용
var sizeWidth = 34;
var sizeHeight = 37;

function load_image() {  // img태그생성
for (var i=0; i<nos; i++) {
  strimg = "<img src='" + img1[i] + "' width='" + sizeWidth + "' height='" + sizeHeight + " ' border=0>"
  create_div("cur" +i, i*10, i*10, sizeWidth, sizeHeight, strimg);
}

document.onmousemove = new_image_pos;
setInterval("image_cycle()", 50);
}

function create_div(idn, xp, yp, w, h, ht) {  // div태그생성
document.write("<div id='" + idn + "' style='position:absolute; left:" + xp + "; top:" + yp + "; width:" + w + "; height:" + h + ";'>");
document.write((ht) ? ht : "");
document.write("</div>");
}

function image_cycle() {  // 잔상효과, 흐린이미지가 한단계 진한 이미지의 좌표값을 차례로 할당
var getXpos, getYpos;

for (i=0; i<(nos-1); i++) {
  getXpos = document.all["cur" + (i+1)].style.left;
  getYpos = document.all["cur" + (i+1)].style.top;

  document.all["cur"+i].style.left = getXpos;
  document.all["cur"+i].style.top = getYpos;
}
}

function new_image_pos() {  // cur5에 마우스좌표값을 할당
var Xpos = event.clientX + document.body.scrollLeft;
var Ypos = event.clientY + document.body.scrollTop;

document.all["cur"+(nos-1)].style.left = Xpos;
document.all["cur"+(nos-1)].style.top = Ypos;
}

load_image();

// -->
</script>

<body>
마우스커서를 따라다니는 선물상자
</body>
</html>

'My Programing/HTML and JavaScript' Related Articles more