Блог по программированию

Задание onclick и onscroll

Написано

admin

в

Задание

  1. Создать раскрывающееся меню при клике
  2. Сделайте так, чтобы при прокрутке ниже элемента #avatar (картинка с Винни-Пухом) – он продолжал показываться в левом-верхнем углу. При прокрутке вверх – должен возвращаться на обычное место.

Решение

1.

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. .menu ul {
  7. margin: 0;
  8. list-style: none;
  9. padding-left: 20px;
  10. display: none;
  11. }
  12. .menu .title {
  13. font-size: 18px;
  14. cursor: pointer;
  15. }
  16. .menu .title::before {
  17. content: '▶ ';
  18. font-size: 80%;
  19. color: green;
  20. }
  21. .menu.open .title::before {
  22. content: '▼ ';
  23. }
  24. .menu.open ul {
  25. display: block;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="sweeties" class="menu">
  31. <span class="title">Сладости (нажми меня)!</span>
  32. <ul>
  33. <li>Торт</li>
  34. <li>Пончик</li>
  35. <li>Пирожное</li>
  36. </ul>
  37. </div>
  38. <script>
  39. var menuElem = document.getElementById('sweeties');
  40. var titleElem = menuElem.querySelector('.title');
  41. titleElem.onclick = function() {
  42. menuElem.classList.toggle('open');
  43. };
  44. </script>
  45. </body>
  46. </html>
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .menu ul {
      margin: 0;
      list-style: none;
      padding-left: 20px;
      display: none;
    }
    .menu .title {
      font-size: 18px;
      cursor: pointer;
    }
    .menu .title::before {
      content: '▶ ';
      font-size: 80%;
      color: green;
    }
    .menu.open .title::before {
      content: '▼ ';
    }
    .menu.open ul {
      display: block;
    }
  </style>
</head>
<body>
  <div id="sweeties" class="menu">
    <span class="title">Сладости (нажми меня)!</span>
    <ul>
      <li>Торт</li>
      <li>Пончик</li>
      <li>Пирожное</li>
    </ul>
  </div>
  <script>
    var menuElem = document.getElementById('sweeties');
    var titleElem = menuElem.querySelector('.title');
    titleElem.onclick = function() {
      menuElem.classList.toggle('open');
    };
  </script>
</body>
</html>

2.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. body,
  7. html {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. .column-left {
  12. float: left;
  13. width: 30%;
  14. background: #aef;
  15. }
  16. .column-right {
  17. margin-left: 30%;
  18. width: 70%;
  19. background: tan;
  20. overflow: auto;
  21. /* расшириться вниз захватить float'ы */
  22. }
  23. .header {
  24. line-height: 60px;
  25. background: yellow;
  26. }
  27. .inner {
  28. margin: 1em;
  29. font-size: 130%;
  30. }
  31. #avatar {
  32. float: left;
  33. margin: 0 1em .5em 0;
  34. border: 1px solid black;
  35. text-align: center;
  36. background: white;
  37. }
  38. .fixed {
  39. position: fixed;
  40. top: 0;
  41. left: 0;
  42. }
  43. </style>
  44. </head>
  45. <body>
  47. <div class="header">Шапка</div>
  48. <div class="column-left">
  49. <div class="inner">
  50. <h3>Персонажи:</h3>
  51. <ul>
  52. <li>Винни-Пух</li>
  53. <li>Ослик Иа</li>
  54. <li>Сова</li>
  55. <li>Кролик</li>
  56. </ul>
  57. </div>
  58. </div>
  59. <div class="column-right">
  60. <div class="inner">
  61. <h3>Винни-Пух</h3>
  62. <div id="avatar">
  63. <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
  64. <div>Кадр из мультфильма</div>
  65. </div>
  66. <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
  68. <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
  70. <p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни),
  71. содержавшейся в 1920-х в Лондонском зоопарке.</p>
  73. <p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
  74. Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
  75. привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
  76. военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
  77. надпись.
  78. </p>
  80. <p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
  81. не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
  82. в 1954; между этими датами — ряд трагических событий германской истории.</p>
  85. <p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный
  86. лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер
  87. Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. Алан Милн, Кристофер Робин и Винни-Пух. Фотография
  88. из Британской национальной портретной галереи</p>
  90. <p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем
  91. рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие
  92. эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
  94. <p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
  95. Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
  96. сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
  97. опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
  98. возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
  99. </div>
  100. </div>
  102. <script>
  103. var avatarElem = document.getElementById('avatar');
  104. var avatarSourceBottom = avatarElem.getBoundingClientRect().bottom + window.pageYOffset;
  105. window.onscroll = function() {
  106. if (avatarElem.classList.contains('fixed') && window.pageYOffset < avatarSourceBottom) {
  107. avatarElem.classList.remove('fixed');
  108. } else if (window.pageYOffset > avatarSourceBottom) {
  109. avatarElem.classList.add('fixed');
  110. }
  111. };
  112. </script>
  113. </body>
  114. </html>
<!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="https://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>

 

Больше записей