<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<TITLE> scrollMove </TITLE>
<script type="text/javascript">
function addEvent( obj, type, fn )
{
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent){
obj["e"+type+fn] = fn;
obj[type+fn] = function() {obj["e"+type+fn]( window.event ); }
obj.attachEvent( on"+type, obj[type+fn] );
}
}
function move_scroll(){
var slow_move=document.getElementById("slow_move");
var a = parseInt(slow_move.style.top);
var count;
var now_top=(document.documentElement.scrollTop);
var het=10;
var b;
if(a!=now_top)
{
count=20;
if(a<now_top)
het = het;
/*var change_amount=(now_top-a);
het = Math.ceil(Math.abs(change_amount)/5);
count =Math.ceil(1/change_amount);
*/
if(a > now_top){
het = -het;
//change_amount = (a-now_top);
/*het = -het;
count =Math.ceil(Math.abs(change_amount));*/
}
b=1;
}
else if(a==now_top+1||a==now_top+2||a==now_top+3||a==now_top+4||a==now_top+5||a==now_top+6||a==now_top+7||a==now_top+8||a==now_top+9||a==now_top||a==now_top-1||a==now_top-2||a==now_top-3||a==now_top-4||a==now_top-5||a==now_top-6||a==now_top-7||a==now_top-8||a==now_top-9)
{
het = now_top;
count=1000;
b=0;
}
document.getElementById("outout").innerHTML = count;
slow_move.style.top = parseInt(slow_move.style.top)+(het*b)+"px";
setTimeout("move_scroll()",count);
}
//addEvent(window, "scroll",move_scroll);
addEvent(window, "load",move_scroll);
</script>
<style type="text/css">
#slow_move {
right:50px;
width:200px;
height:200px;
position:absolute;
background-color:red;
}
</style>
</head>
<body style="height:1600px">
<div id="outout" style="position"></div>
<div id="slow_move" style="top:0px">
</div>
</body>
</html>
독타입을 업격하게 선언해서 만들어 놓은 형태다... 천천히 미끄러지듯이 따라온다...;;
흠~~~!!
'프로그래밍 > HTML+CSS+JavaScript' 카테고리의 다른 글
| 슬라이딩 윈도우 2 (0) | 2009.10.21 |
|---|---|
| CSS를 이용한 단순한 폼 (0) | 2009.10.21 |
| 브라우저랜더링과 테이블구조 (0) | 2009.10.21 |
| 자바스크립트 따라다니는 스크롤바 (0) | 2009.10.13 |
| 내가 만든 java script 정규식 (0) | 2009.10.13 |