제블로그 보시면
왼쪽이미지 상하 버튼이 움직이는 퀵메뉴입니다~
여러가지 소스를 적용 해보았는데 티스토리에서는 먹히지가 않더라구요
그래서 단순 이미지나 텍스만 따라 움직이는 소스 를 알려드립니다~
테이블 까지 짜고 하기엔 복잡한거를 떠나서 구동이 너무 느려지더군요...
지금 블로그 자체가 조금 무거워서 그런가 살짝 무브 액션이 느리더라구요..
|
<script type="text/javascript">
<!--
var scroll_pixel,div_pixel,gtpos,gbpos,loop,moving_spd;
var top_margin = 350;
var top_margin2 = 350;
var speed = 20;
var speed2 = 15;
var moving_stat = 1;
function check_scrollmove()
{
if(document.body && (document.body.scrollLeft || document.scrollTop)){
scroll_pixel = document.body.scrollTop;
gtpos = document.body.scrollTop+top_margin;
gbpos = document.body.scrollTop+top_margin2;
}else if(document.documentElement &&(document.documentElement.scrollLeft||document.documentElement.scrollTop))
{
scroll_pixel = document.documentElement.scrollTop;
gtpos = document.documentElement.scrollTop+top_margin;
gbpos = document.documentElement.scrollTop+top_margin2;
}
if(div_id.style.pixelTop < gtpos)
{
moving_spd=(gbpos-div_id.style.pixelTop)/speed;
div_id.style.pixelTop += moving_spd;
}
if(div_id.style.pixelTop > gtpos)
{
moving_spd=(div_id.style.pixelTop-gtpos)/speed;
div_id.style.pixelTop -= moving_spd;
}
loop = setTimeout("check_scrollmove()",speed2);
}
function moving_control()
{
if(!moving_stat){check_scrollmove(); moving_stat=1;}
else{clearTimeout(loop); moving_stat=0; div_id.style.pixelTop = top_margin;}
}
-->
</script>
<style type="text/css">
<!--
#div_id
{
position : absolute;
left:940PX;
top:350PX;
}
-->
</style>
<body onload="check_scrollmove()">
<a name="top"></a>
<div id="div_id">
<a href="#TOP"><img src="./images/top.png"></a><BR>
<a href="#down"><img src="./images/down.png"></a>
</div>
위소스는 페이지 상단과 하단으로 바로 이동해주는 퀵메뉴소스 입니다
</BODY> 밑에 소스 넣어주시면 됍니다~
<img src="./images/top.png"> 이 경로 부분은 자신의 업로드해서 올린 이미지 주소
적어 주시면 됍니다~
var top_margin = 230; /// 창의 맨위와의 여백 내려올때
var top_margin2 = 150; /// 창의 맨위와의 여백 올라올때
var speed = 20; /// 점차 줄어드는 속도를 위한 설정
var speed2 = 15; /// setTimeout을 위한 속도 설정
var moving_stat = 1; /// 메뉴의 스크롤을 로딩시 on/off설정 1=움직임 0은 멈춤
|
상단 하단 으로 가는 액션 말고 링크를 넣어준다던지 하면 조금더 넓은 활용 가치가 있을거라 생각 합니다 ^^
2010/05/20 - [홈페이지 제작/드림위버] - HTML 링크걸기~
