Web/Javascript
내용을 자동으로 스크롤 시키기
aucd29
2013. 9. 26. 21:27
이번 내용은 특정한 내용을 레이어 영역안에 넣어주고 그 안에있는 내용을 자동으로 스크롤이 될수있도록 하는 기능입니다.
먼저 몇가지 사항을 알아야 합니다.
- 스크롤바의 두께는 대략 16 픽셀이라는것,
- 레이어의 속성중 OVERFLOW: auto 는 내용이 지정된 레이어 크기보다 클경우 자동으로 스크롤을 생성한다는것,
그럼 이제부터 시작입니다.
■ 먼저 <HEAD> 부분에 스크립트를 넣어줍니다.
<script language="JavaScript">
var delta1 = 1;
function scrollit1() {
Layer1.scrollLeft = Layer1.scrollLeft+delta1;
if(Layer1.scrollLeft>=Layer1.scrollWidth-Layer1.clientWidth) {
delta1 = delta1 * -1;
}
if(Layer1.scrollLeft<=0)
delta1 = delta1 * -1;
}
</script>
■ <BODY> 구문에 스크립트를 호출합니다.
onload="window.setInterval('scrollit1();', 30);"
여기서 30 이란 숫자는 속도입니다.
■ 원하는 내용을 <BODY> 안에 넣어주세요.
<div id=Layer1 style="VISIBILITY: visible; OVERFLOW: auto; WIDTH: 100%; POSITION: absolute; HEIGHT: 61; left: 0; top: 0"><img height=45 src="mem01.gif" width=2102 border=0></div>
여기서 주의할점은 레이어 이름입니다.
레이어 이름은 id=Layer1 이라는거 잊지마세요.
만약 이름을 바꿀시는 스크립트도 동일하게 수정하셔야합니다.
먼저 몇가지 사항을 알아야 합니다.
- 스크롤바의 두께는 대략 16 픽셀이라는것,
- 레이어의 속성중 OVERFLOW: auto 는 내용이 지정된 레이어 크기보다 클경우 자동으로 스크롤을 생성한다는것,
그럼 이제부터 시작입니다.
■ 먼저 <HEAD> 부분에 스크립트를 넣어줍니다.
<script language="JavaScript">
var delta1 = 1;
function scrollit1() {
Layer1.scrollLeft = Layer1.scrollLeft+delta1;
if(Layer1.scrollLeft>=Layer1.scrollWidth-Layer1.clientWidth) {
delta1 = delta1 * -1;
}
if(Layer1.scrollLeft<=0)
delta1 = delta1 * -1;
}
</script>
■ <BODY> 구문에 스크립트를 호출합니다.
onload="window.setInterval('scrollit1();', 30);"
여기서 30 이란 숫자는 속도입니다.
■ 원하는 내용을 <BODY> 안에 넣어주세요.
<div id=Layer1 style="VISIBILITY: visible; OVERFLOW: auto; WIDTH: 100%; POSITION: absolute; HEIGHT: 61; left: 0; top: 0"><img height=45 src="mem01.gif" width=2102 border=0></div>
여기서 주의할점은 레이어 이름입니다.
레이어 이름은 id=Layer1 이라는거 잊지마세요.
만약 이름을 바꿀시는 스크립트도 동일하게 수정하셔야합니다.