스크롤 소스 정보
javascript 스크롤 소스
관련링크
http://arttoart.pe.kr/gnu3/
234회 연결
본문
<html>
<head>
<script language="JavaScript">
var stmnGAP1 = 135; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
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()
{
if (ReadCookie("ANIMATE") == "false") {
ANIMATE.checked = false;
STATICMENU.style.top = document.body.scrollTop + stmnGAP1;
}
else {
ANIMATE.checked = true;
STATICMENU.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
}
}
</script>
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v5.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p> </p>
<table border="1" width="817">
<tr>
<td width="807" height="716">
<p> </p>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><!-- 스크롤 메뉴 정의 시작 -->
<div id="STATICMENU" style="width:148px; height:200px; position:absolute; left:831px; top:62px; z-index:100;">
...이자리는 본인이 알아서 움직이게될 메뉴구성...
<!-- 애니메이션 유무를 체크하는 부분, 체그박스로 나타남 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> 메뉴이동하기<br>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
<!-- 스크롤메뉴를 가동하는 자바스크립트(수정금지) -->
<SCRIPT language="javascript">
InitializeStaticMenu();
</SCRIPT>
</p>
</body>
</html>
메뉴로 쓰시든 저처럼 쓰시든 알아서 쓰세요^^*
<head>
<script language="JavaScript">
var stmnGAP1 = 135; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
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()
{
if (ReadCookie("ANIMATE") == "false") {
ANIMATE.checked = false;
STATICMENU.style.top = document.body.scrollTop + stmnGAP1;
}
else {
ANIMATE.checked = true;
STATICMENU.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
}
}
</script>
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v5.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p> </p>
<table border="1" width="817">
<tr>
<td width="807" height="716">
<p> </p>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><!-- 스크롤 메뉴 정의 시작 -->
<div id="STATICMENU" style="width:148px; height:200px; position:absolute; left:831px; top:62px; z-index:100;">
...이자리는 본인이 알아서 움직이게될 메뉴구성...
<!-- 애니메이션 유무를 체크하는 부분, 체그박스로 나타남 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> 메뉴이동하기<br>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
<!-- 스크롤메뉴를 가동하는 자바스크립트(수정금지) -->
<SCRIPT language="javascript">
InitializeStaticMenu();
</SCRIPT>
</p>
</body>
</html>
메뉴로 쓰시든 저처럼 쓰시든 알아서 쓰세요^^*
추천
1
1
댓글 전체
이거 상하 조절은 되는대 좌우 조절이 안되네요... ㅎㅎ;
잘쓸게요..감사합니다.
대부분의 스크롤 소스는 화면 해상도에 따라 문제가 발생하죠..
그 부분이 해결(해상도에 따라 left, right 공백을 조절하여 출력하는)된 소스를 가지고 있었는데..
이긍 찾아보니 없네요..
그 부분이 해결(해상도에 따라 left, right 공백을 조절하여 출력하는)된 소스를 가지고 있었는데..
이긍 찾아보니 없네요..
우선고맙습니다.이걸찿고있었거든요.
<div id="STATICMENU" style="width:148px; height:200px; position:absolute; left:831px; top:62px; z-index:100;">
...이자리는 본인이 알아서 움직이게될 메뉴구성...
<!-- 애니메이션 유무를 체크하는 부분, 체그박스로 나타남 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> 메뉴이동하기<br>
</div>
여기에서요.
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> 메뉴이동하기<br>
이부분 삭제하니까 작동이 안되네요.
삭제하고 작동하게할려면 어떻게 하는지?
<div id="STATICMENU" style="width:148px; height:200px; position:absolute; left:831px; top:62px; z-index:100;">
...이자리는 본인이 알아서 움직이게될 메뉴구성...
<!-- 애니메이션 유무를 체크하는 부분, 체그박스로 나타남 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> 메뉴이동하기<br>
</div>
여기에서요.
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> 메뉴이동하기<br>
이부분 삭제하니까 작동이 안되네요.
삭제하고 작동하게할려면 어떻게 하는지?
