글
JAVA Script Source 레이어의 내용이 화면이 스크롤되는것에따라 이동이 됩니다. 위치는 임의로 지정이 가능합니다. 레이어 안에는 텍스트 뿐 아니라, 이미지, 테이블 등도 넣어서 꾸밀 수 있기 때문에, 간이메뉴로 사용하기 좋습니다. 1. <head>와 </head>사이에 아래의 소스를 넣습니다. ---------------------------------------------------------------------------------------- <style type="text/css">
<!--
#watermark {position:absolute}
-->
</style> ---------------------------------------------------------------------------------------- 2. <body>와 </body>사이에 스크롤바를 따라다니게할 부분을 <div>태그로 감싸줍니다. ---------------------------------------------------------------------------------------- <div id="waterMark" style="z-index:10">내용</div> ---------------------------------------------------------------------------------------- 이 부분이 스크롤바를 따라다니는 레이어입니다. 내용은 텍스트, 이미지, 테이블 등으로 이용해 취향에 맞게 꾸밀 수 있습니다. 3. </body>의 바로 앞(본문의 맨 끝)에 아래 소스를 넣습니다. ---------------------------------------------------------------------------------------- <script language="JavaScript1.2">
<!-- markW = 62;
markH = 47;
markX = 100;
markY = 100;
markRefresh = 10; if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark; wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; function setVals() {
barW = 0;
barH = 0;
if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
} else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
posX = ((innerWidth - markW)-barW) * (markX/100);
posY = ((innerHeight - markH)-barH) * (markY/100);
} function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
} function markMe() {
setVals();
window.onresize=setVals;
markID = setInterval ("wRefresh()",markRefresh);
} window.onload=markMe; //-->
</script> ---------------------------------------------------------------------------------------- markW = 62; 에서 62 는 레이어의 폭
markH = 47; 에서 47 은 레이어의 높이
markX = 100; 에서 100 은 레이어의 X축 좌표 (퍼센트값입니다. 따라서 가로 100%를 의미하므로 오른쪽 끝)
markY = 100; 에서 100 은 레이어의 Y축 좌표 (퍼센트값입니다. 따라서 세로 100%를 의미하므로 맨 아래) ((-------IMAGE-------)) * 출처 : 신의키스(http://www.kissofgod.net) * 개인참고용으로 가져온 관계로 일부 수정된 내용이 있습니다. * 정확한 정보를 얻고자 하시는분은 출처인 신의키스님 사이트를 방문바랍니다.
<!--
#watermark {position:absolute}
-->
</style> ---------------------------------------------------------------------------------------- 2. <body>와 </body>사이에 스크롤바를 따라다니게할 부분을 <div>태그로 감싸줍니다. ---------------------------------------------------------------------------------------- <div id="waterMark" style="z-index:10">내용</div> ---------------------------------------------------------------------------------------- 이 부분이 스크롤바를 따라다니는 레이어입니다. 내용은 텍스트, 이미지, 테이블 등으로 이용해 취향에 맞게 꾸밀 수 있습니다. 3. </body>의 바로 앞(본문의 맨 끝)에 아래 소스를 넣습니다. ---------------------------------------------------------------------------------------- <script language="JavaScript1.2">
<!-- markW = 62;
markH = 47;
markX = 100;
markY = 100;
markRefresh = 10; if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark; wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; function setVals() {
barW = 0;
barH = 0;
if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
} else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
posX = ((innerWidth - markW)-barW) * (markX/100);
posY = ((innerHeight - markH)-barH) * (markY/100);
} function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
} function markMe() {
setVals();
window.onresize=setVals;
markID = setInterval ("wRefresh()",markRefresh);
} window.onload=markMe; //-->
</script> ---------------------------------------------------------------------------------------- markW = 62; 에서 62 는 레이어의 폭
markH = 47; 에서 47 은 레이어의 높이
markX = 100; 에서 100 은 레이어의 X축 좌표 (퍼센트값입니다. 따라서 가로 100%를 의미하므로 오른쪽 끝)
markY = 100; 에서 100 은 레이어의 Y축 좌표 (퍼센트값입니다. 따라서 세로 100%를 의미하므로 맨 아래) ((-------IMAGE-------)) * 출처 : 신의키스(http://www.kissofgod.net) * 개인참고용으로 가져온 관계로 일부 수정된 내용이 있습니다. * 정확한 정보를 얻고자 하시는분은 출처인 신의키스님 사이트를 방문바랍니다.
'JS > jsajax' 카테고리의 다른 글
| 설치형 TC에 Ajax 적용해보았다. (0) | 2012.01.16 |
|---|---|
| 티스토리에 jQuery Ajax를 적용시켜 보았다 (0) | 2012.01.16 |
| 비 전문가를 위한 XMLHttpRequest 활용 소개 (0) | 2009.01.12 |
| 세션 상태를 사용하여 불필요한 Ajax 트래픽 피하기 (한글) (0) | 2009.01.05 |
| Ajax로 실시간 갱신 하기 (0) | 2008.06.21 |
| 한번에 페이지내의 모든 이미지의 링크 점선/테두리 없애는 스크립트 (0) | 2008.05.30 |
| 레이어형식 화면고정하는, 스크롤바를 따라다니는 TOP 버튼 (0) | 2008.02.26 |
| 새 창의 링크로 부모창에 결과출력 (0) | 2008.02.26 |
| [JS] 스크롤바 따라다니는 메뉴 2 (0) | 2008.02.26 |
RECENT COMMENT