블로그 파크의 많은 블로거들은 블로그의 페이지 오른쪽 하단에 아이콘이 있습니다. 화면이 어떻게 늘어나더라도 항상 오른쪽 하단에 유지됩니다. 맨 위에 페이지를 클릭하십시오. 나중에이 효과를 달성하기 위해 데모를 작성하는 것에 대해 생각해 봅시다.
1. 아이콘의 오른쪽 하단 모서리가 고정되어 있습니다.
1. SS는 4 개의 레이아웃 방법을 제공합니다. 고정은 절대 포지셔닝 요소를 나타냅니다. 그래서 우리는 고정 된 아이콘 고정을 달성하기 위해 사용하기로 결정했습니다.
| 순수한 | 정적 위치 지정 이외의 첫 번째 부모 요소에 비해 포지셔닝, 절대적으로 배치 된 요소를 생성합니다. 요소의 위치는 "왼쪽", "상단", "오른쪽"및 "하단"속성으로 지정됩니다. |
| 결정된 | 브라우저 창을 기준으로 배치하는 절대적으로 배치 된 요소를 생성합니다. 요소의 위치는 "왼쪽", "상단", "오른쪽"및 "하단"속성으로 지정됩니다. |
| 상대적인 | 비교적 배치 된 요소를 생성, 정상 위치에 비해 위치합니다. 따라서 "왼쪽 : 20"은 요소의 왼쪽 위치에 20 픽셀을 추가합니다. |
| 공전 | 기본값. 위치가없고 요소가 정상 스트림에 나타납니다 (상단, 하단, 왼쪽, 오른쪽 또는 Z- 인덱스 선언을 무시 함). |
| 상속 | 위치 속성의 값이 상위 요소에서 상속되어야한다고 지정합니다. |
2. 코드는 다음과 같습니다. 버튼 버튼은 항상 화면의 오른쪽 하단에 배치됩니다. 상단 및 하부 정밀 막대를 드래그하든 브라우저 창 크기를 스트레칭하는지 여부.
코드 사본은 다음과 같습니다.
#mytopbtn {
하단 : 5px;
오른쪽 : 5px;
위치 : 고정;
}
2. 클릭 한 후 페이지 상단 모서리로 돌아갑니다.
1. 화면의 상단 코너로 돌아가려면 JavaScript를 사용하여 드래그 막대의 위쪽 및 아래 이동을 작동하는 방법을 이해해야합니다. JavaScript는 스크롤 및 스크롤 방법을 제공합니다.
코드 사본은 다음과 같습니다.
scrollby (0, -30) // 화면 위로 30 픽셀을 움직입니다
scroll (0,0) // 화면이 상단 코너로 돌아갑니다
2. 위에서 언급 한 것은 드래그 막대를 움직이는 방법이므로 특정 속도로 페이지 상단으로 이동하는 방법. 그런 다음 setinterval 및 clearinterval 메소드를 사용해야합니다. 이를 통해 30 픽셀이 10 밀리 초 미만으로 화면 위로 이동할 수 있습니다.
코드 사본은 다음과 같습니다.
<body>
<div id = "mydiv">
</div>
<button id = "mytopbtn"onclick = "topfunc ()"> to to to to </button>
</body>
코드 사본은 다음과 같습니다.
var myvar;
함수 topfunc () {
myvar = setInterval (각 스크롤 비, 10);
}
eightscrollby (everheight) {
if (document.documentElement.scrolltop <= 0) {
ClearInterval (Myvar);
}또 다른{
scrollby (0, -30);
}
}
III. 확장하다
상단 버튼이 구현되었습니다. 그렇다면 버튼을 구현하려면 하단 화면의 클릭을 클릭합니까? 실제로이 원리는 비슷하므로 여기서 데모를 작성하지 않습니다. 참조 할 속성을 제공하십시오.
코드 사본은 다음과 같습니다.
웹 페이지의 보이는 영역 너비 : Document.body.clientWidth
웹 페이지의 보이는 영역 높이 : document.body.clientHeight
웹 페이지의 보이는 영역 너비 : document.body.offsetwidth (가장자리 선의 너비 포함)
웹 페이지의 보이는 영역 높이 : Document.body.offSetheight (가장자리 라인의 너비 포함)
웹 페이지의 전체 텍스트 너비 : document.body.scrollwidth
웹 페이지의 전체 텍스트 : document.body.scrollheight
웹 페이지는 높은 수준으로 롤아웃됩니다 : document.body.scrolltop
롤아웃중인 웹 페이지의 왼쪽 : document.body.scrollleft
웹 페이지의 기본 부분 : Window.screentop
웹 페이지의 본문 왼쪽 : Window.screenLeft
높은 화면 해상도 : Window.Screen.height
화면 해상도의 너비 : Window.Screen.width
사용 가능한 작업 공간 높이 : Window.Screen.availHeight
사용 가능한 작업 공간 너비 : Window.Screen.availWidth
위는이 기사의 전체 내용입니다. 블로그를 좋아하는 어린이 신발이 좋아하는 블로그를 좋아하기를 바랍니다.