프로그래밍/HTML+CSS+JavaScript

슬라이딩 윈도우

긴자손-1 2009. 10. 21. 18:33
반응형

<!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>


독타입을 업격하게 선언해서 만들어 놓은 형태다... 천천히 미끄러지듯이 따라온다...;;


흠~~~!! 

반응형