묻고답하기
[re] [질문] 스크롤바 움직여도 이미지 따라 다니게 집어 넣기..
2002.05.20 08:25
두가지 방법이 있습니다.
첫번째는 배경화면으로 고정시켜 버리는 것이고 두번째는 이미지가 스크롤에 맞춰 따라오게 하는 것이겠지요.
사이트 구성을 볼때 배경화면으로 고정시키는 것을 권장합니다.
소스를 보니 이미 그렇게 하셨더군요 ;; 따라서 방법은 따로 적지 않겠습니다 -0-
두번째는 스크롤하면 따라오게 하는 것이겠지요.
---------------------
우선
<style type="text/css">
<!--
#watermark {position:absolute}
-->
</style>
태그를 헤더에 넣어줍니다.
그리고는 <body> 와 </body> 사이에 <div id="waterMark" style="z-index:10">내용</div> 를 넣어줍니다.
끝으로 </body> 바로 앞에
<script language="JavaScript1.2">
<!--
markW = 50;
markH = 60;
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 = 50; 에서 50 는 레이어의 폭
markH = 60; 에서 60 은 레이어의 높이
markX = 100; 에서 100 은 레이어의 X축 좌표 (%)
markY = 100; 에서 100 은 레이어의 Y축 좌표 (%)
끝.
---------------------------------
두번재 방법도 있습니다. 위와 달리 부드럽게 이미지가 스크롤을 따라오는 것입니다.
우선 헤더에
<style type="text/css">
<!--
#floater {position:absolute; visibility:visible}
-->
</style>
<script language="JavaScript">
<!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) {
diffY = document.body.scrollTop;
diffX = 0;
}
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
//-->
</script>
란 스크립트를 넣어주세요.
그리고는 body 에 <div id=floater style="left:0; top:150; width:200; height:60; z-index:10">내용</div> 를 넣어주시고요. 각 길이기는 픽셀에 맞춰 조정해 주셔야 합니다.
끝.
-----------------------------------
>http://khai.klsg.org 여기 있는 보아 이미지를 이쁘장하게 눟고 싶습니다.
>
>지금은 초기라서 스크롤바로 하지 않아도 되지만...
>
>글이 생긴다거나...스크롤바가 생길시에... 움직인다면 보아 이미지도 따라 움직이게
>하고 싶습니다.
>
>즉 이쁘장하게 오른쪽 아래에 집어 놓구 싶습니다.
>
>소스 구할수 없을까요?
>
첫번째는 배경화면으로 고정시켜 버리는 것이고 두번째는 이미지가 스크롤에 맞춰 따라오게 하는 것이겠지요.
사이트 구성을 볼때 배경화면으로 고정시키는 것을 권장합니다.
소스를 보니 이미 그렇게 하셨더군요 ;; 따라서 방법은 따로 적지 않겠습니다 -0-
두번째는 스크롤하면 따라오게 하는 것이겠지요.
---------------------
우선
<style type="text/css">
<!--
#watermark {position:absolute}
-->
</style>
태그를 헤더에 넣어줍니다.
그리고는 <body> 와 </body> 사이에 <div id="waterMark" style="z-index:10">내용</div> 를 넣어줍니다.
끝으로 </body> 바로 앞에
<script language="JavaScript1.2">
<!--
markW = 50;
markH = 60;
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 = 50; 에서 50 는 레이어의 폭
markH = 60; 에서 60 은 레이어의 높이
markX = 100; 에서 100 은 레이어의 X축 좌표 (%)
markY = 100; 에서 100 은 레이어의 Y축 좌표 (%)
끝.
---------------------------------
두번재 방법도 있습니다. 위와 달리 부드럽게 이미지가 스크롤을 따라오는 것입니다.
우선 헤더에
<style type="text/css">
<!--
#floater {position:absolute; visibility:visible}
-->
</style>
<script language="JavaScript">
<!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) {
diffY = document.body.scrollTop;
diffX = 0;
}
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
//-->
</script>
란 스크립트를 넣어주세요.
그리고는 body 에 <div id=floater style="left:0; top:150; width:200; height:60; z-index:10">내용</div> 를 넣어주시고요. 각 길이기는 픽셀에 맞춰 조정해 주셔야 합니다.
끝.
-----------------------------------
>http://khai.klsg.org 여기 있는 보아 이미지를 이쁘장하게 눟고 싶습니다.
>
>지금은 초기라서 스크롤바로 하지 않아도 되지만...
>
>글이 생긴다거나...스크롤바가 생길시에... 움직인다면 보아 이미지도 따라 움직이게
>하고 싶습니다.
>
>즉 이쁘장하게 오른쪽 아래에 집어 놓구 싶습니다.
>
>소스 구할수 없을까요?
>
감사합니다~~