Skip to content

Commit 5fb0e36

Browse files
iliakaniliakan
committed
renovations
1 parent fbc6303 commit 5fb0e36

79 files changed

Lines changed: 683 additions & 763 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919

2020
<div id="field">
21-
<img src="//js.cx/clipart/ball.gif" id="ball">
21+
<img src="//js.cx/clipart/ball.svg" id="ball">
2222
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2323
</div>
2424

‎2-ui/1-document/15-metrics/4-put-ball-in-center/solution.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ ball.style.top = Math.round(field.clientHeight/2 - ball.offsetHeight/2)+'px';
3333
Код выше стабильно работать не будет, потому что `IMG` идет без ширины/высоты:
3434

3535
```html
36-
<img src="ball.gif" id="ball">
36+
<img src="ball.svg" id="ball">
3737
```
3838

3939
**Высота и ширина изображения неизвестны браузеру до тех пор, пока оно не загрузится, если размер не указан явно.**
@@ -43,7 +43,7 @@ ball.style.top = Math.round(field.clientHeight/2 - ball.offsetHeight/2)+'px';
4343
Чтобы это исправить, добавим `width/height` к картинке:
4444

4545
```html
46-
<img src="ball.gif" *!*width="40" height="40"*/!* id="ball">
46+
<img src="ball.svg" *!*width="40" height="40"*/!* id="ball">
4747
```
4848

4949
Теперь браузер всегда знает ширину и высоту, так что все работает. Тот же эффект дало бы указание размеров в CSS.

‎2-ui/1-document/15-metrics/4-put-ball-in-center/solution.view/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919

2020
<div id="field">
21-
<img src="//js.cx/clipart/ball.gif" width="40" height="40" id="ball">
21+
<img src="//js.cx/clipart/ball.svg" width="40" height="40" id="ball">
2222
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2323
</div>
2424

‎2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919

2020
<div id="field">
21-
<img src="//js.cx/clipart/ball.gif" id="ball">
21+
<img src="//js.cx/clipart/ball.svg" id="ball">
2222
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2323
</div>
2424

‎2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535

3636

3737
<div id="field">
38-
<img src="//js.cx/clipart/ball.gif" id="ball">
38+
<img src="//js.cx/clipart/ball.svg" id="ball">
3939
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4040
</div>
4141

‎2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929

3030
<div id="field">
31-
<img src="//js.cx/clipart/ball.gif" id="ball">
31+
<img src="//js.cx/clipart/ball.svg" id="ball">
3232
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3333
</div>
3434

2-ui/3-event-details/5-fixevent/article.md renamed to 2-ui/3-event-details/12-fixevent/article.md

File renamed without changes.

‎2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@
44

55
В браузере нет способа "просто получить" текущие координаты. Это может сделать обработчик события, в данном случае `mousemove`. Поэтому нужно будет поставить обработчик на `mousemove` и при каждом движении запоминать текущие координаты, чтобы `setInterval` мог раз в 100мс сравнивать их.
66

7-
Можно обойтись и без `setInterval` -- сравнивать координаты при каждом срабатывании `mousemove`. Если передвинулись на маленькое расстояние с последнего `mousemove` -- это "наведение на элемент", а на большое -- игнорируем. Вариант с `setInterval` теоретически надёжнее, но на практике и один `mousemove` работает.
7+
Можно обойтись и без `setInterval` -- сравнивать координаты при каждом срабатывании `mousemove`. Если передвинулись на маленькое расстояние с последнего `mousemove` -- это "наведение на элемент", а на большое -- игнорируем. Вариант с `setInterval` лучше с точки зрения производительности -- `mousemove` происходит уж очень часто, но если проверка несложная, то и `mousemove` подойдёт.
88

9-
Чтобы наш код не срабатывал чересчур часто, мы будем начинать анализ координат при заходе на элемент, а заканчивать -- при выходе с него.
10-
11-
Если выход осуществлён, и при этом на элементе зафиксировано "состояние наведения", то нужно вызвать соответствующий обработчик `options.out`.
9+
Имеет смысл начинать анализ координат и отслеживание `mousemove` при заходе на элемент, а заканчивать -- при выходе с него.
1210

1311
Чтобы точно отловить момент входа и выхода, без учёта подэлементов (во избежание мигания), можно использовать `mouseenter/mouseleave`.
1412

1513
В решении, предложенном ниже, однако, используется `mouseover/mouseout`, так как это позволит легко "прикрутить" к такому объекту делегирование, если потребуется. А, чтобы не было лишних срабатываний, лишние переходы отфильтровываются.
1614

15+
При этом при обнаружении "наведения на элемент" это запоминается в переменной `isHover` и вызывается `options.over`, а затем, при выходе с элемента, если было "наведение", вызывается `options.out`.
1716

1817

1918

‎2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ new HoverIntent({
4242
});
4343
```
4444

45-
Демо:
45+
Демо этого кода:
4646

4747
[iframe src="solution" height=110]
4848

‎2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,14 @@
2020

2121
Для `mouseout` всё наоборот:
2222

23+
2324
<ul>
2425
<li>`event.target` -- элемент, с которого ушла мышь, то есть на котором возникло событие.</li>
2526
<li>`event.relatedTarget` -- элемент, на который перешла мышь.</li>
2627
</ul>
2728

28-
[online]
29-
В примере ниже вы можете наглядно посмотреть события `mouseover/out`, возникающие на всех элементах.
30-
29+
В примере ниже, если у вас есть мышь, вы можете наглядно посмотреть события `mouseover/out`, возникающие на всех элементах.
3130
[codetabs src="mouseoverout" height=220]
32-
[/online]
3331

3432
[warn header="`relatedTarget` может быть `null`"]
3533
Свойство `relatedTarget` может быть равно `null`.

0 commit comments

Comments
 (0)