1. DreamWeaver에 레이어를 삽입하고 이 레이어를 스크롤 영역으로 사용합니다. 다음과 같이 레이어의 매개변수를 설정합니다.
레이어 번호를 레이어의 ID 속성인 slayer로 설정합니다.
왼쪽 및 위쪽 값은 페이지의 레이어 위치이며 필요에 따라 설정할 수 있습니다. 여기서는 100픽셀과 120픽셀입니다.
너비와 높이는 레이어의 크기이며 필요에 따라 설정됩니다.
클립은 레이어의 표시 영역을 말하며, 클립 바깥 부분은 숨겨져 있는 부분을 이 표시 영역을 이용하여 레이어의 오른쪽 부분을 숨긴 후, 이 표시 영역을 조절하면서 레이어의 이동을 조절하여 스크롤을 완성합니다. 우리가 원하는 영역 효과.
오른쪽을 디스플레이 너비로 설정합니다. 여기서는 하단이 높이와 같습니다.
다음은 레이어의 코드입니다.
< div id="slayer" style="position:absolute; 상단: 120px; 왼쪽: 100px; 클립: ect(0 340 120 0); 높이: 120px; 배경색: #CCCCCC; 레이어-배경-색상: # CCCCCC; 테두리: 1px 없음 #000000 너비: 670px" >
레이어에 일부 그림을 가로로 배치할 수 있습니다. 여기서는 대신 표를 사용합니다. 위에서 설정한 레이어의 크기는 모든 이미지를 수용하기에 충분합니다.
2. 다음 코드는 레이어 스크롤 코드로, 레이어 표시 <div> 아래에 삽입합니다.
삽입시 레이어W의 값은 클립 오른쪽의 값으로 여기서는 340이라는 점 참고하세요.
< 스크립트 언어="javascript" >
< !-- //hve 작성
var layerW=340; //표시 영역의 너비를 설정합니다.
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.left);
var layerT=parseInt(slayer.style.top);
var step=0; //스크롤 값
함수 movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
이동(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
함수 moveover(){
클리어타임아웃(movx);
}
함수 mov(a){
slayer.style.left = (단계+=a) + layerL;
ClipL=0단계;
클립R=레이어W-단계;
클립B=레이어H;
클립T=0;
slayer.style.clip="direct("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /스크립트 >
3. 다른 레이어를 삽입하여 "컨트롤 버튼"을 배치합니다.
이 레이어는 이전 레이어 아래에 있으며 "제어 버튼"을 배치하는 데 사용됩니다. 위치는 아래와 같이 필요에 따라 조정할 수 있습니다. 여기서는 테이블의 컬러 블록을 제어 버튼으로 사용합니다. 두 개의 화살표 모양 그림을 만드는 것이 더 좋을 것입니다.
4. "Control Buttons" 태그에 다음 코드를 추가합니다.
테이블 태그 <td>에 추가됩니다. 그림을 버튼으로 사용하는 경우 <img> 태그에 추가하세요.
왼쪽 버튼:
onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"
오른쪽 버튼:
onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"
위 코드의 의미는 마우스가 버튼을 가리키면 액션이 시작되고 버튼을 길게 누르는 속도가 빨라지고 마우스가 버튼에서 벗어나 액션이 중지되며 - 기호는 반대 방향으로의 움직임을 의미한다는 것입니다.
5. 완료
마우스가 "제어 버튼"을 가리키면 왼쪽이나 오른쪽으로 스크롤됩니다. 마우스를 길게 누르면 스크롤 속도가 빨라집니다.
전체 코드는 다음과 같습니다. (BODY 영역에서 복사 및 테스트 가능)
< div id="slayer" style="position:absolute; 상단: 120px; 왼쪽: 100px; 클립: ect(0 340 120 0); 높이: 120px; 배경색: #CCCCCC; 레이어-배경-색상: # CCCCCC; 테두리: 1px 없음 #000000 너비: 670px" >
< 스크립트 언어="javascript" >
< !-- //hve 작성
var layerW=340; //표시 영역의 너비를 설정합니다.
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.left);
var layerT=parseInt(slayer.style.top);
var step=0; //스크롤 값
함수 movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
이동(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
함수 moveover(){
클리어타임아웃(movx);
}
함수 mov(a){
slayer.style.left = (단계+=a) + layerL;
ClipL=0단계;
클립R=레이어W-단계;
클립B=레이어H;
클립T=0;
slayer.style.clip="direct("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /스크립트 >
< 테이블 cellpacing="10" border="0" cellpadding="0" >
<tr bgcolor="#FFCC99" >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< /tr >
< /테이블 >
< /div >
< div id="Layer1" 스타일="위치:절대; 너비:344px; 높이:20px; z-index:1; 왼쪽: 97px; 위쪽: 244px" >
< 테이블 너비="100%" 높이="100%" >
<tr>
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover() ;movstar(1,20)" width="14" >< /td >
< td >< /td >
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover ();movstar(-1,20)" width="14" >< /td >
< /tr >
< /테이블 >
< /div >