<script language="JavaScript">
<!--
var lastScrollX = 0;
var lastScrollY = 0;
var speed = 10;
var rate = 0.2;
var action = window.setInterval('rePosition()', speed);
function rePosition(){
var diffY = document.body.scrollTop;
var diffX = document.body.scrollLeft;
document.getElementById("x").value=diffX;
document.getElementById("y").value=diffY;
var obj = document.getElementById("layer_right");
if(diffY != lastScrollY) {
percent = rate * (diffY - lastScrollY);
if(percent > 0) {
percent = Math.ceil(percent);
}
else {
percent = Math.floor(percent);
}
obj.style.top = parseInt(obj.style.top) + percent;
//document.all.layer_right.style.pixelTop += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = rate * (diffX - lastScrollX);
if(percent > 0) {
percent = Math.ceil(percent);
}
else {
percent = Math.floor(percent);
}
obj.style.left = parseInt(obj.style.left) + percent;
//document.all.layer_right.style.pixelLeft += percent;
lastScrollX = lastScrollX + percent;
}
}
// -->
</script>
<div id="layer_right" style="background-color:#cccccc; width:100px; height:100px; position:absolute; left:350px; top:50px; z-index:1;">
x<input type="text" id="x">
y<input type="text" id="y">
</div>
<table width="1200" height="1000" border="1">
<tr>
<td valign="top">
봉선화
<br/>
비 오자 장독간에 봉선화 반만 벌어
<br/>
해마다 피는 꽃을 나만 두고 볼 것인가.
<br/>
세세한 사연을 적어 누님께로 보내자.
<br/>
누님이 편지 보며 하마 울까 웃으실까.
<br/>
눈앞에 삼삼이는 고향 집을 그리시고
<br/>
손톱에 꽃물 들이던 그 날 생각하시리
<br/>
양지에 마주 앉아 실로 찬찬 매어 주던
<br/>
하얀 손가락 가락이 연붉은 그 손톱을
<br/>
지금은 꿈 속에 본 듯 힘줄만이 서노라.
<br/>
詩. 김 상 옥
<br/>
</td>
</tr>
</table>
</body>
ps :
document.body.scrollTop 이 안먹힐 때~~ dtd 선언때문에~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
document.documentElement.scrollTop 로 접근된다.
참고로 documentElement는 document 엘레먼트를 읽기전용으로 반환하는 속성이라고 한다.
'웹' 카테고리의 다른 글
| jquery drag&drop (0) | 2011.02.22 |
|---|---|
| html5 file api 다중업로드(다중선택) (0) | 2011.02.22 |
| aptana 웹제작툴(html, js, css ..) (0) | 2010.10.12 |
| 부모창 존재 여부 (0) | 2010.01.14 |
| 디지털 시계 (0) | 2009.12.15 |
