Реализация веб-страницы с функцией портала

Введение

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

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать файлы и структуру проекта;
• реализовывать функциональность портала с использованием JavaScript и jQuery;
• обеспечивать изменение цвета боковых кнопок в зависимости от положения скролла пользователя.

🏆 Достижения

После завершения этого проекта вы сможете:

• структурировать и настраивать веб-разработку проекта;
• использовать JavaScript и jQuery для манипуляции с DOM и обработки взаимодействий пользователя;
• реализовать функцию, похожую на портал, для улучшения пользовательского опыта на длинной веб-странице.

Skills Graph

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

1. Откройте папку проекта. Структура каталогов следующая:

├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

2. В этой структуре:

   • index.html - главная страница.
   • css - папка для файлов стилей.
   • images - папка для ресурсов изображений.
   • js/index.js - JS-файл, который необходимо заполнить.
   • js/jquery-3.6.0.min.js - файл библиотеки jQuery.

3. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

4. Откройте "Web 8080" в верхней части ВМ и обновите ее вручную, чтобы увидеть страницу.

Реализация функциональности портала

В этом шаге вы дополните код в файле js/index.js для реализации функции портала.

1. Добавьте следующий код в файл js/index.js:

$(window).scroll(function () {
  // Когда страница прокручивается в указанный диапазон, соответствующие боковые кнопки меняют цвет.
  let top = scrollY;
  $("#lift a").removeClass("active-color");
  if (top >= 0 && top < 960) {
    $("#lift a:nth-of-type(1)").addClass("active-color");
  } else if (top >= 960 && top <= 1920) {
    $("#lift a:nth-of-type(2)").addClass("active-color");
  } else {
    $("#lift a:nth-of-type(3)").addClass("active-color");
  }
});

function toFunction(scrollTopVal) {
  // Нажатие на кнопку приводит к прокрутке страницы в указанную позицию.
  window.scrollTo(0, scrollTopVal);
}

2. Объяснение:

   • Функция $(window).scroll() используется для определения позиции прокрутки страницы.
   • Когда страница прокручивается в указанный диапазон, соответствующая боковая кнопка получает активный стиль (.active-color), а стили других кнопок устанавливаются по умолчанию (.default-color).
   • Функция toFunction() используется для прокрутки страницы в указанную позицию при нажатии пользователем на боковые кнопки.

Проверьте функциональность портала

1. Вернитесь в браузер и обновите страницу.
2. Нажмите на кнопку верхнюю, среднюю или нижнюю слева от страницы и наблюдайте, как страница прокручивается в соответствующий диапазон.
3. Проверьте, что соответствующая боковая кнопка получает активный стиль (.active-color), когда страница прокручивается в указанный диапазон.

Финальный результат показан ниже:

Поздравляем! Вы успешно реализовали функциональность портала в своем проекте.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете выполнить больше лабораторных работ в LabEx, чтобы улучшить свои навыки.