새우의 세상사

[링크] : 오픈캡쳐 - 스크롤하면서 캡쳐하기
Posted by 새우날다 Trackback 0 Comment 0

스크롤바 따라 다니는 메뉴 스크립트

여기저기 여러가지 프로그램이 있지만 이게 좋더군요.

어디서 나온건지는 잘 모르겠지만, 지식인에 많이 돌아다니고 있네요.

지식인에 있는 소스들을 잘 봐도 대부분은 html 태그로 인해서 잘린 부분들도 있고, 그래서 정상적으로 동작하지 않는 것들이 많습니다.

완전하게 동작하도록 수정하고, 설명 추가했습니다.

아래 <html>부터 </html>까지 복사해서 확장자를 html로 저장하면 바로 동작합니다.

=======================================================

<html>
<head>
<title>스크롤되는 메뉴</title>
<style type="text/css">
body, td { font-family:Tahoma,굴림; font-size:9pt; color:#222222; }
</style>
<!-- 우선 <head>와 </head> 사이에 다음의 스크립트를 넣는다. -->
<!-- =========== 여기부터 =========== -->
<script language="javascript">
<!--
var stmnLEFT = 610;    // 스크롤메뉴의 좌측 위치
var stmnGAP1 = 148;    // 페이지 헤더부분의 여백
var stmnGAP2 = 50;    // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 0;    // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 100; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 7;  // 스크롤되는 속도 (클수록 늦게 움직임)

var stmnTimer;

// 저장된 쿠키에서 스크롤 여부를 읽어온다.
function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;

 while (i < cLen) {
  var j = i + labelLen;

  if (document.cookie.substring(i, j) == label) {
  var cEnd = document.cookie.indexOf(";", j);
  if (cEnd == -1) cEnd = document.cookie.length;
  return unescape(document.cookie.substring(j, cEnd));
  }
  i++;
}
return "";
}

// 스크롤 여부를 쿠키로 저장한다.
function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}

// 메뉴의 위치를 갱신한다.
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;

 stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;

 stmnRefreshTimer = stmnActivateSpeed;
if (stmnStartPoint != stmnEndPoint ) {
  stmnScrollAmount = Math.ceil(Math.abs(stmnEndPoint - stmnStartPoint) / 15);
  STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ((stmnEndPoint < stmnStartPoint) ? -stmnScrollAmount : stmnScrollAmount);
  stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}

// 스크롤 고정 여부를 확인하여 상태를 저장한다.
function ToggleAnimate()
{
if (!ANIMATE.checked) {
  RefreshStaticMenu();
  SaveCookie("ANIMATE", "true", 300);
}
else {
  clearTimeout(stmnTimer);
  STATICMENU.style.top = stmnGAP1;
  SaveCookie("ANIMATE", "false", 300);
}
}

// 메뉴를 초기화한다.
function InitializeStaticMenu()
{
STATICMENU.style.left = stmnLEFT;
if (ReadCookie("ANIMATE") == "false") {
  ANIMATE.checked = true;
  STATICMENU.style.top = document.body.scrollTop + stmnGAP1;
}
else {
  ANIMATE.checked = false;
  STATICMENU.style.top = document.body.scrollTop + stmnBASE;
  RefreshStaticMenu();
}
}
-->
</script>
<!-- =========== 여기까지 =========== -->

</head>

<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!-- =========== 여기부터 =========== -->
<!-- 실제로 나타나야 될 내용을 <div>와 </div> 사이에 넣는다. -->
<!-- div의 위치나 크기는 적당하게 바꾼다. -->
<!-- 테이블을 이용해서 필요한 모양으로 만든다. -->
<!-- 위치고정이란 체크박스에 체크하면 스크롤이 되지 않는다. -->
<DIV id="STATICMENU" style="width:180px; height:350px; position:absolute; left:600px; top:0px; z-index:9;">
<table width="180" cellspacing="0" cellpadding="0" border="1" bordercolor="#cccccc">
<tr>
<td><iframe src='http://weather.superboard.com/wxbn.cgi?db=59_section21&skin=yellow002' width='180' height='118' allowtransparency='true' frameborder='no' scrolling='no' leftmargin='0' topmargin='0' marginwidth='0'></iframe></td>
</tr>
<tr>
<td align=center>첫번째 줄</td>
</tr>
<tr>
<td align=center><a href="http://www.naver.com">네이버로가기</a></td>
</tr>
</table>
<center><INPUT id="ANIMATE" onclick="ToggleAnimate();" type="checkbox">위치고정</center>
</div>

<!-- 스크롤 메뉴를 초기화하는 부분 -->
<script language="javascript">
InitializeStaticMenu(); // 스크롤메뉴를 초기화하는 자바스크립트
</script>
<!-- =========== 여기까지 =========== -->
</body>

</html>

Posted by 새우날다 Trackback 0 Comment 0