renovations
This commit is contained in:
Ilya Kantor
parent
dac75c79b5
commit
770be24376
13 changed files with 835 additions and 0 deletions
|
|
@ -0,0 +1,109 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-left {
|
||||||
|
float: left;
|
||||||
|
width: 30%;
|
||||||
|
background: #aef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-right {
|
||||||
|
margin-left: 30%;
|
||||||
|
width: 70%;
|
||||||
|
background: tan;
|
||||||
|
overflow: auto; /* расшириться вниз захватить float'ы */
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
line-height: 60px;
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
margin: 1em;
|
||||||
|
font-size: 130%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#avatar {
|
||||||
|
float:left;
|
||||||
|
margin: 0 1em .5em 0;
|
||||||
|
border: 1px solid black;
|
||||||
|
text-align:center;
|
||||||
|
background:white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="header">Шапка</div>
|
||||||
|
|
||||||
|
<div class="column-left">
|
||||||
|
<div class="inner">
|
||||||
|
<h3>Персонажи:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Винни-Пух</li>
|
||||||
|
<li>Ослик Иа</li>
|
||||||
|
<li>Сова</li>
|
||||||
|
<li>Кролик</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column-right">
|
||||||
|
<div class="inner">
|
||||||
|
|
||||||
|
<h3>Винни-Пух</h3>
|
||||||
|
|
||||||
|
<div id="avatar">
|
||||||
|
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||||
|
<div>Кадр из мультфильма</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||||
|
|
||||||
|
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||||
|
|
||||||
|
<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.</p>
|
||||||
|
|
||||||
|
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.</p>
|
||||||
|
|
||||||
|
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2].
|
||||||
|
Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи</p>
|
||||||
|
|
||||||
|
<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
|
||||||
|
|
||||||
|
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var avatarElem = document.getElementById('avatar');
|
||||||
|
|
||||||
|
var avatarSourceBottom = avatarElem.getBoundingClientRect().bottom + window.pageYOffset;
|
||||||
|
|
||||||
|
window.onscroll = function() {
|
||||||
|
if (avatarElem.classList.contains('fixed') && window.pageYOffset < avatarSourceBottom) {
|
||||||
|
avatarElem.classList.remove('fixed');
|
||||||
|
} else if (window.pageYOffset > avatarSourceBottom) {
|
||||||
|
avatarElem.classList.add('fixed');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-left {
|
||||||
|
float: left;
|
||||||
|
width: 30%;
|
||||||
|
background: #aef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-right {
|
||||||
|
margin-left: 30%;
|
||||||
|
width: 70%;
|
||||||
|
background: tan;
|
||||||
|
overflow: auto; /* расшириться вниз захватить float'ы */
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
line-height: 60px;
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
margin: 1em;
|
||||||
|
font-size: 130%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#avatar {
|
||||||
|
float:left;
|
||||||
|
margin: 0 1em .5em 0;
|
||||||
|
border: 1px solid black;
|
||||||
|
text-align:center;
|
||||||
|
background:white;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="header">Шапка</div>
|
||||||
|
|
||||||
|
<div class="column-left">
|
||||||
|
<div class="inner">
|
||||||
|
<h3>Персонажи:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Винни-Пух</li>
|
||||||
|
<li>Ослик Иа</li>
|
||||||
|
<li>Сова</li>
|
||||||
|
<li>Кролик</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column-right">
|
||||||
|
<div class="inner">
|
||||||
|
|
||||||
|
<h3>Винни-Пух</h3>
|
||||||
|
|
||||||
|
<div id="avatar">
|
||||||
|
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||||
|
<div>Кадр из мультфильма</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||||
|
|
||||||
|
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||||
|
|
||||||
|
<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.</p>
|
||||||
|
|
||||||
|
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.</p>
|
||||||
|
|
||||||
|
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2].
|
||||||
|
Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи</p>
|
||||||
|
|
||||||
|
<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
|
||||||
|
|
||||||
|
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
# Аватар наверху при прокрутке
|
||||||
|
|
||||||
|
[importance 5]
|
||||||
|
|
||||||
|
Сделайте так, чтобы при прокрутке ниже элемента `#avatar` (картинка с Винни-Пухом) -- он продолжал показываться в левом-верхнем углу.
|
||||||
|
|
||||||
|
При прокрутке вверх -- должен возвращаться на обычное место.
|
||||||
|
|
||||||
|
Прокрутите вниз, чтобы увидеть:
|
||||||
|
[iframe src="solution" height=300 link border="1"]
|
||||||
|
|
||||||
94
2-ui/3-event-details/7-onscroll/2-updown-button/solution.md
Normal file
94
2-ui/3-event-details/7-onscroll/2-updown-button/solution.md
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
Добавим в документ `DIV` с кнопкой:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="updown"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Сама кнопка должна иметь `position:fixed`.
|
||||||
|
|
||||||
|
```css
|
||||||
|
#updown {
|
||||||
|
position: fixed;
|
||||||
|
top: 30px;
|
||||||
|
left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Кнопка является CSS-спрайтом, поэтому мы дополнительно добавляем ей размер и два состояния:
|
||||||
|
|
||||||
|
```css
|
||||||
|
#updown {
|
||||||
|
height: 9px;
|
||||||
|
width: 14px;
|
||||||
|
position: fixed;
|
||||||
|
top: 30px;
|
||||||
|
left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#updown.up {
|
||||||
|
background: url(...updown.gif) left top;
|
||||||
|
}
|
||||||
|
|
||||||
|
#updown.down {
|
||||||
|
background: url(...updown.gif) left -9px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Для решения необходимо аккуратно разобрать все возможные состояния кнопки и указать, что делать при каждом.
|
||||||
|
|
||||||
|
Состояние -- это просто класс элемента: `up/down` или пустая строка, если кнопка не видна.
|
||||||
|
|
||||||
|
При прокрутке состояния меняются следующим образом:
|
||||||
|
|
||||||
|
```js
|
||||||
|
window.onscroll = function() {
|
||||||
|
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
var innerHeight = document.documentElement.clientHeight;
|
||||||
|
|
||||||
|
switch(updownElem.className) {
|
||||||
|
case '':
|
||||||
|
if (pageY > innerHeight) {
|
||||||
|
updownElem.className = 'up';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'up':
|
||||||
|
if (pageY < innerHeight) {
|
||||||
|
updownElem.className = '';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'down':
|
||||||
|
if (pageY > innerHeight) {
|
||||||
|
updownElem.className = 'up';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
При клике:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var pageYLabel = 0;
|
||||||
|
|
||||||
|
updownElem.onclick = function() {
|
||||||
|
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
|
||||||
|
switch(this.className) {
|
||||||
|
case 'up':
|
||||||
|
pageYLabel = pageY;
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
this.className = 'down';
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'down':
|
||||||
|
window.scrollTo(0, pageYLabel);
|
||||||
|
this.className = 'up';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body, html {
|
||||||
|
height:100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#matrix {
|
||||||
|
width: 400px;
|
||||||
|
margin: auto;
|
||||||
|
overflow: auto;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#updown {
|
||||||
|
height: 9px;
|
||||||
|
width: 14px;
|
||||||
|
color: green;
|
||||||
|
position: fixed;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#updown.up::before {
|
||||||
|
content: '▲';
|
||||||
|
}
|
||||||
|
|
||||||
|
#updown.down::before {
|
||||||
|
content: '▼';
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="matrix">
|
||||||
|
<script>for (var i = 0; i < 2000; i++) document.writeln(i)</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="updown"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var updownElem = document.getElementById('updown');
|
||||||
|
|
||||||
|
var pageYLabel = 0;
|
||||||
|
|
||||||
|
updownElem.onclick = function() {
|
||||||
|
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
|
||||||
|
switch(this.className) {
|
||||||
|
case 'up':
|
||||||
|
pageYLabel = pageY;
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
this.className = 'down';
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'down':
|
||||||
|
window.scrollTo(0, pageYLabel);
|
||||||
|
this.className = 'up';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onscroll = function() {
|
||||||
|
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
var innerHeight = document.documentElement.clientHeight;
|
||||||
|
|
||||||
|
switch(updownElem.className) {
|
||||||
|
case '':
|
||||||
|
if (pageY > innerHeight) {
|
||||||
|
updownElem.className = 'up';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'up':
|
||||||
|
if (pageY < innerHeight) {
|
||||||
|
updownElem.className = '';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'down':
|
||||||
|
if (pageY > innerHeight) {
|
||||||
|
updownElem.className = 'up';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
body, html {
|
||||||
|
height:100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#matrix {
|
||||||
|
width: 400px;
|
||||||
|
margin: auto;
|
||||||
|
overflow: auto;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
Символы для стрелок: ▲ ▼
|
||||||
|
|
||||||
|
<div id="matrix">
|
||||||
|
<script>for (var i = 0; i < 2000; i++) document.writeln(i)</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ... ваш код
|
||||||
|
// при необходимости, в документ можно добавить элементы и стили
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
20
2-ui/3-event-details/7-onscroll/2-updown-button/task.md
Normal file
20
2-ui/3-event-details/7-onscroll/2-updown-button/task.md
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
# Кнопка вверх-вниз
|
||||||
|
|
||||||
|
[importance 3]
|
||||||
|
|
||||||
|
Создайте кнопку навигации, которая помогает при прокрутке страницы.
|
||||||
|
|
||||||
|
Работать должна следующим образом:
|
||||||
|
<ul>
|
||||||
|
<li>Пока страница промотана меньше чем на высоту экрана вниз -- кнопка не видна.</li>
|
||||||
|
<li>При промотке страницы вниз больше, чем на высоту экрана, появляется кнопка "стрелка вверх".</li>
|
||||||
|
<li>При нажатии на нее страница прыгает вверх, но не только. Дополнительно, кнопка меняется на "стрелка вниз" и при клике возвратит на старое место. Если же в этом состоянии посетитель сам прокрутит вниз больше, чем один экран, то она вновь изменится на "стрелка вверх".</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
Должен получиться удобный навигационный помощник.
|
||||||
|
|
||||||
|
Посмотрите, как оно должно работать, в ифрейме ниже. Прокрутите ифрейм, навигационная стрелка появится слева-сверху.
|
||||||
|
|
||||||
|
[iframe border="1" height="200" link src="solution"]
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
Функция должна по текущей прокрутке определять, какие изображения видимы, и загружать их.
|
||||||
|
|
||||||
|
Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так:
|
||||||
|
|
||||||
|
```js
|
||||||
|
... страница ...
|
||||||
|
|
||||||
|
function isVisible(elem) {
|
||||||
|
|
||||||
|
var coords = elem.getBoundingClientRect();
|
||||||
|
|
||||||
|
var windowHeight = document.documentElement.clientHeight;
|
||||||
|
|
||||||
|
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
|
||||||
|
var topVisible = coords.top > 0 && coords.top < windowHeight;
|
||||||
|
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
|
||||||
|
|
||||||
|
return topVisible || bottomVisible;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
*!*
|
||||||
|
showVisible();
|
||||||
|
window.onscroll = showVisible;
|
||||||
|
*/!*
|
||||||
|
```
|
||||||
|
|
||||||
|
При запуске функция ищет все видимые картинки с `realsrc` и перемещает значение `realsrc` в `src`. Обратите внимание, т.к. атрибут `realsrc` нестандартный, то для доступа к нему мы используем `get/setAttribute`. А `src` -- стандартный, поэтому можно обратиться по DOM-свойству.
|
||||||
|
|
||||||
|
**Функция проверки видимости `isVisible(elem)` получает координаты текущей видимой области и сравнивает их с элементом.**
|
||||||
|
|
||||||
|
Для видимости достаточно, чтобы координаты верхней(или нижней) границы элемента находились между границами видимой области.
|
||||||
|
|
||||||
|
В решении также указан вариант с `isVisible`, который расширяет область видимости на +-1 страницу (высота страницы -- `document.documentElement.clientHeight`).
|
||||||
|
|
||||||
|
[edit src="solution"]Открыть полное решение в песочнице[/edit]
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
.news-item {
|
||||||
|
width: 700px;
|
||||||
|
text-align: justify;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.news-item .title {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
|
||||||
|
|
||||||
|
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Космопорт Америка \ Architecture</div>
|
||||||
|
|
||||||
|
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра.
|
||||||
|
|
||||||
|
<div class="illustrations">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="200" height="140" realsrc="//js.cx/lazyimg/1.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
|
||||||
|
|
||||||
|
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
|
||||||
|
<div class="illustrations">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="200" height="259" realsrc="//js.cx/lazyimg/2-1.jpg">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="200" height="260" realsrc="//js.cx/lazyimg/2-2.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
|
||||||
|
|
||||||
|
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
|
||||||
|
<div class="illustrations">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="341" height="474" realsrc="//js.cx/lazyimg/3-1.jpg">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="338" height="474" realsrc="//js.cx/lazyimg/3-2.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
|
||||||
|
|
||||||
|
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели.
|
||||||
|
|
||||||
|
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="452" realsrc="//js.cx/lazyimg/4.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
|
||||||
|
|
||||||
|
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно!
|
||||||
|
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="600" height="393" realsrc="//js.cx/lazyimg/5.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
|
||||||
|
|
||||||
|
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
|
||||||
|
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="433" realsrc="//js.cx/lazyimg/6.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Фотограф Emily Lee \ Photography</div>
|
||||||
|
|
||||||
|
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
|
||||||
|
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="453" realsrc="//js.cx/lazyimg/7.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Иконы моды в Fashimals \ Creative</div>
|
||||||
|
|
||||||
|
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
|
||||||
|
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="600" height="622" realsrc="//js.cx/lazyimg/8.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Проверяет элемент на попадание в видимую часть экрана.
|
||||||
|
* Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
|
||||||
|
*/
|
||||||
|
function isVisible(elem) {
|
||||||
|
|
||||||
|
var coords = elem.getBoundingClientRect();
|
||||||
|
|
||||||
|
var windowHeight = document.documentElement.clientHeight;
|
||||||
|
|
||||||
|
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
|
||||||
|
var topVisible = coords.top > 0 && coords.top < windowHeight;
|
||||||
|
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
|
||||||
|
|
||||||
|
return topVisible || bottomVisible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Вариант проверки, считающий элемент видимым,
|
||||||
|
если он не более чем -1 страница назад или +1 страница вперед
|
||||||
|
|
||||||
|
function isVisible(elem) {
|
||||||
|
|
||||||
|
var coords = elem.getBoundingClientRect();
|
||||||
|
|
||||||
|
var windowHeight = document.documentElement.clientHeight;
|
||||||
|
|
||||||
|
var extendedTop = -windowHeight;
|
||||||
|
var extendedBottom = 2 * windowHeight;
|
||||||
|
|
||||||
|
// top visible || bottom visible
|
||||||
|
var topVisible = coords.top > extendedTop && coords.top < extendedBottom;
|
||||||
|
var bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
|
||||||
|
|
||||||
|
return topVisible || bottomVisible;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
function showVisible() {
|
||||||
|
var imgs = document.getElementsByTagName('img');
|
||||||
|
for(var i=0; i<imgs.length; i++) {
|
||||||
|
|
||||||
|
var img = imgs[i];
|
||||||
|
|
||||||
|
var realsrc = img.getAttribute('realsrc');
|
||||||
|
if (!realsrc) continue;
|
||||||
|
|
||||||
|
if (isVisible(img)) {
|
||||||
|
img.src = realsrc;
|
||||||
|
img.setAttribute('realsrc', '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onscroll = showVisible;
|
||||||
|
showVisible();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
.news-item {
|
||||||
|
width: 700px;
|
||||||
|
text-align: justify;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.news-item .title {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
|
||||||
|
|
||||||
|
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Космопорт Америка \ Architecture</div>
|
||||||
|
|
||||||
|
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра.
|
||||||
|
|
||||||
|
<div class="illustrations">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="200" height="140" realsrc="//js.cx/lazyimg/1.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
|
||||||
|
|
||||||
|
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
|
||||||
|
<div class="illustrations">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="200" height="259" realsrc="//js.cx/lazyimg/2-1.jpg">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="200" height="260" realsrc="//js.cx/lazyimg/2-2.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
|
||||||
|
|
||||||
|
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
|
||||||
|
<div class="illustrations">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="341" height="474" realsrc="//js.cx/lazyimg/3-1.jpg">
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="338" height="474" realsrc="//js.cx/lazyimg/3-2.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
|
||||||
|
|
||||||
|
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели.
|
||||||
|
|
||||||
|
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="452" realsrc="//js.cx/lazyimg/4.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
|
||||||
|
|
||||||
|
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно!
|
||||||
|
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="600" height="393" realsrc="//js.cx/lazyimg/5.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
|
||||||
|
|
||||||
|
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
|
||||||
|
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="433" realsrc="//js.cx/lazyimg/6.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Фотограф Emily Lee \ Photography</div>
|
||||||
|
|
||||||
|
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
|
||||||
|
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="453" realsrc="//js.cx/lazyimg/7.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="title">Иконы моды в Fashimals \ Creative</div>
|
||||||
|
|
||||||
|
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
|
||||||
|
|
||||||
|
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="600" height="622" realsrc="//js.cx/lazyimg/8.jpg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ... ваш код ...
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
2-ui/3-event-details/7-onscroll/3-load-visible-img/task.md
Normal file
50
2-ui/3-event-details/7-onscroll/3-load-visible-img/task.md
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
# Загрузка видимых изображений
|
||||||
|
|
||||||
|
[importance 4]
|
||||||
|
|
||||||
|
Задача, которая описана ниже, демонстрирует результативный метод оптимизации страницы.
|
||||||
|
|
||||||
|
С целью экономии трафика и более быстрой загрузки страницы изображения на ней заменяются на "макеты".
|
||||||
|
|
||||||
|
Вместо такого изображения:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="yozhik.jpg" width="128" height="128">
|
||||||
|
```
|
||||||
|
|
||||||
|
<img src="//js.cx/clipart/yozhik.jpg" width="128" height="128">
|
||||||
|
|
||||||
|
|
||||||
|
Стоит вот такое:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img *!*src="1.gif"*/!* width="128" height="128" *!*realsrc="yozhik.jpg"*/!*>
|
||||||
|
```
|
||||||
|
|
||||||
|
<img src="//js.cx/lazyimg/1.gif" width="128" height="128">
|
||||||
|
|
||||||
|
То есть настоящий URL находится в атрибуте `realsrc` (название атрибута можно выбрать любое). А в `src` поставлен серый GIF размера 1x1, и так как `width/height` правильные, то он растягивается, так что вместо изображения виден серый прямоугольник.
|
||||||
|
|
||||||
|
При этом, чтобы браузер загрузил изображение, нужно заменить значение `src` на то, которое находится в `realsrc`.
|
||||||
|
|
||||||
|
Если страница большая, то замена больших изображений на такие макеты существенно убыстряет полную загрузку страницы. Это особенно заметно в случае, когда на странице много анонсов новостей с картинками или изображений товаров, из которых многие находятся за пределами прокрутки.
|
||||||
|
|
||||||
|
Кроме того, для мобильных устройств JavaScript может подставлять URL уменьшенного варианта картинки.
|
||||||
|
|
||||||
|
Напишите код, который при прокрутке окна загружает ставшие видимыми изображения.
|
||||||
|
|
||||||
|
То есть, как только изображение попало в видимую часть документа -- в `src` нужно прописать правильный URL из `realsrc`.
|
||||||
|
|
||||||
|
Пример работы вы можете увидеть в `iframe` ниже, если прокрутите его:
|
||||||
|
|
||||||
|
[iframe src="solution"]
|
||||||
|
|
||||||
|
Особенности реализации:
|
||||||
|
<ul>
|
||||||
|
<li>При начальной загрузке некоторые изображения должны быть видны сразу, до прокрутки. Код должен это учитывать.</li>
|
||||||
|
<li>Некоторые изображения могут быть обычными, без `realsrc`. Их код не должен трогать вообще.</li>
|
||||||
|
<li>Также код не должен перегружать уже показанное изображение.</li>
|
||||||
|
<li>Желательно предусмотреть загрузку изображений не только видимых сейчас, но и на страницу вперед и назад от текущего места.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
P.S. Горизонтальной прокрутки нет.
|
||||||
31
2-ui/3-event-details/7-onscroll/article.md
Normal file
31
2-ui/3-event-details/7-onscroll/article.md
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
# Прокрутка: событие scroll
|
||||||
|
|
||||||
|
Событие `onscroll` происходит, когда элемент прокручивается.
|
||||||
|
|
||||||
|
В отличие от события `onwheel` (колесико мыши), его могут генерировать только прокручиваемые элементы или окно `window`. Но зато оно генерируется всегда, при любой прокрутке, не обязательно "мышиной".
|
||||||
|
|
||||||
|
[cut]
|
||||||
|
Например, следующая функция при прокрутке окна выдает количество прокрученных пикселей:
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ autorun
|
||||||
|
window.onscroll = function() {
|
||||||
|
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
document.getElementById('showScroll').innerHTML = scrolled + 'px';
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
В действии:
|
||||||
|
Текущая прокрутка = <b id="showScroll">прокрутите окно</b>
|
||||||
|
|
||||||
|
Каких-либо особенностей события здесь нет, разве что для его использования нужно отлично представлять, как получить текущее значение прокрутки или прокрутить документ. Об этом мы говорили ранее, в главе [](/metrics).
|
||||||
|
|
||||||
|
Некоторые области применения `onscroll`:
|
||||||
|
<ul>
|
||||||
|
<li>Показ дополнительных элементов навигации при прокрутке.</li>
|
||||||
|
<li>Подгрузка и инициализация элементов интерфейса, ставших видимыми после прокрутки.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
Вашему вниманию предлагаются несколько задач, которые вы можете решить сами или посмотреть использование `onscroll` на их примере.
|
||||||
|
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue