Координаты на странице

Август 24, 2022

Главная
Информатика
Координаты на странице

Содержание

2. Клиентские координаты Каждое событие происходит в конкретном месте области просмотра, при этом координаты указателя мыши сохраняются
4. Пример: допустим, нам нужно получить координаты щелчка при клике на кнопку: var x = document.getElementById('but'); x.addEventListener('click',
5. Страничные координаты В то время как клиентские координаты указывают на место возникновения события в области просмотра,
6. Размер прокрутки Помимо позиции элемента относительно области просмотра либо всей страницы, мы можем получить размер проскроленной
7. Пример: допустим, нам нужно рассчитать, на сколько мы прокрутили страницу в момент клика по кнопке. Для
8. offsetWidth/Height Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
9. clientWidth/Height Они включают в себя ширину области содержимого вместе с внутренними отступами padding, но без прокрутки
10. scrollWidth/Height Эти свойства – как clientWidth/clientHeight, но также включают в себя прокрученную (которую не видно) часть
11. scrollLeft/scrollTop Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.
12. Задание 1: Выводить значения скрола с верху страницы на событие прокрутки страницы.
13. Задание 2: При скроле, в момент активного 2-го экрана покажите фиксированную кнопку внизу страницы, которая до
14. Прокрутка: scrollTo, scrollBy, scrollIntoView Метод scrollBy(x,y) прокручивает страницу относительно её текущего положения. Например, scrollBy(0,10) прокручивает страницу
15. scrollIntoView Вызов elem.scrollIntoView(top) прокручивает страницу, чтобы elem оказался вверху. У него есть один аргумент: если top=true
16. Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = "hidden".
17. Задание 3: Создать страницу с прокруткой. В конце страницы создать кнопку “Перейти в начало страницы”, которая
18. Задание 4: Реализовать TABS-блок. При клике по по вкладке, должен показываться соответствующий текст:
20. Скачать презентацию

Слайд 2

Клиентские координаты
Каждое событие происходит в конкретном месте области просмотра, при этом

координаты указателя мыши сохраняются в свойствах clientX / clientY объекта event, которые поддерживаются во всех браузерах.

Слайд 3

Слайд 4

Пример:
допустим, нам нужно получить координаты щелчка при клике на кнопку:
var x

= document.getElementById('but');
x.addEventListener('click', showCoordinates);
function showCoordinates(event) {
alert('you click in ' + event.clientX + 'x' + event.clientY);
}

Слайд 5

Страничные координаты
В то время как клиентские координаты указывают на место

возникновения события в области просмотра, страничные координаты определяют это место на странице. Они представлены свойствами pageX / pageY и рассчитываются относительно левого и верхнего краев самой страницы, а не области просмотра.
Если страница не прокручивалась, страничные координаты будут совпадать с клиентскими.

Слайд 6

Размер прокрутки
Помимо позиции элемента относительно области просмотра либо всей страницы, мы

можем получить размер проскроленной части при помощи свойств pageYOffset/pageXOffset.

Слайд 7

Пример:
допустим, нам нужно рассчитать, на сколько мы прокрутили страницу в момент

клика по кнопке. Для этого можно поступить так:
var x = document.getElementById('but');
x.addEventListener('click', showCoordinates);
function showCoordinates(event) {
var scrollNow = window.pageYOffset;
alert('you click in ' + scrollNow);
}

Слайд 8

offsetWidth/Height
Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая

рамки.

Слайд 9

clientWidth/Height
Они включают в себя ширину области содержимого вместе с внутренними отступами

padding, но без прокрутки

Слайд 10

scrollWidth/Height
Эти свойства – как clientWidth/clientHeight,
но также включают в себя
прокрученную

(которую не видно)
часть элемента

Слайд 11

scrollLeft/scrollTop
Свойства scrollLeft/scrollTop
– ширина/высота невидимой,
прокрученной в данный момент,
части элемента

слева и сверху.

Слайд 12

Задание 1:
Выводить значения скрола с верху страницы на событие прокрутки страницы.

Слайд 13

Задание 2:
При скроле, в момент активного 2-го экрана покажите фиксированную кнопку

внизу страницы, которая до этого будет являться скрытой.

Слайд 14

Прокрутка: scrollTo, scrollBy, scrollIntoView
Метод scrollBy(x,y) прокручивает страницу относительно её текущего

положения. Например, scrollBy(0,10) прокручивает страницу на 10px вниз.
- Метод scrollTo(pageX,pageY) прокручивает страницу на абсолютные координаты (pageX,pageY). То есть, чтобы левый-верхний угол видимой части страницы имел данные координаты относительно левого верхнего угла документа. Это всё равно, что поставить scrollLeft/scrollTop. Для прокрутки в самое начало мы можем использовать scrollTo(0,0).

Слайд 15

scrollIntoView
Вызов elem.scrollIntoView(top) прокручивает страницу, чтобы elem оказался вверху. У него есть

один аргумент:
если top=true (по умолчанию), то страница будет прокручена, чтобы elem появился в верхней части окна. Верхний край элемента совмещён с верхней частью окна.
если top=false, то страница будет прокручена, чтобы elem появился внизу. Нижний край элемента будет совмещён с нижним краем окна.

Слайд 16

Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = "hidden".

Слайд 17

Задание 3:
Создать страницу с прокруткой. В конце страницы создать кнопку “Перейти

в начало страницы”, которая скролит страницу в самое начало.
В середине страницы создать кнопку, по нажатию на которую, страница прокручивается так, чтобы эта кнопка была сверху видимой области.

Слайд 18

Координаты на странице

Содержание

Клиентские координатыКаждое событие происходит в конкретном месте области просмотра, при этом

Пример:допустим, нам нужно получить координаты щелчка при клике на кнопку:var x

Страничные координаты В то время как клиентские координаты указывают на место

Размер прокруткиПомимо позиции элемента относительно области просмотра либо всей страницы, мы

Пример:допустим, нам нужно рассчитать, на сколько мы прокрутили страницу в момент

offsetWidth/HeightОни содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая

clientWidth/HeightОни включают в себя ширину области содержимого вместе с внутренними отступами

scrollWidth/HeightЭти свойства – как clientWidth/clientHeight, но также включают в себя прокрученную

scrollLeft/scrollTopСвойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента

Задание 1:Выводить значения скрола с верху страницы на событие прокрутки страницы.

Задание 2:При скроле, в момент активного 2-го экрана покажите фиксированную кнопку

Прокрутка: scrollTo, scrollBy, scrollIntoView Метод scrollBy(x,y) прокручивает страницу относительно её текущего

scrollIntoViewВызов elem.scrollIntoView(top) прокручивает страницу, чтобы elem оказался вверху. У него есть