Я только что построил веб -сайт компании и прокрутил полный экран, что значительно улучшило опыт просмотра официального сайта. Итак, давайте суммируем метод использования FullPage.js. Добро пожаловать, чтобы исправить меня
1. Введение в FullPage.js
FullPage.js -это набор плагинов JS, которые реализуют полноэкранную прокрутку браузера. Многие веб -сайты теперь используют его для достижения лучшего опыта просмотра.
Функции, которые могут быть достигнуты:
• Поддержка вперед и назад и управление клавиатурой
• Несколько функций обратного вызова
• Поддержка событий мобильного телефона и таблеток и таблеток
• Поддержка анимации CSS3
• Поддержка окна Zoom
• Автоматическая регулировка при увеличении окна
• Может установить ширину прокрутки, цвет фона, скорость прокрутки, параметры цикла, обратные вызовы, выравнивание текста и т. Д.
2. Скачать плагин
npm | npm Установить FullPage.js
Bower | Bower Install FullPage.js
github | https: //github.com/alvarotrigo/fullpage.js/
cdn | https: //cdnjs.com/libraries/fullpage.js
3. Метод введения файла
<link rel = "styleSheet" href = "css/jquery.fulpage.css"> <script src = "js/jquery.min.js"> </script> <script src = "js/jquery.fullpage.js"> </script>
Примечание. Сначала вы должны представить jQuery, а затем представить FullPage. Когда я впервые начал писать демо, эффект не был достигнут из -за неправильного порядка и ошибки браузера в FullPage.js. jQuery не определен.
4. Напишите код HTML
<div id = "fullpage"> <div> Раздел 1 </div> <div> Раздел 2 </div> <div> Раздел 3 </div> <div> Раздел 4 </div> </div>
Весь контент включен в Div с полной страницей идентификатора, и вы не можете добавить это в тело.
Элемент div с именем класса. Раздел - это одна страница. Замена между различными страницами может контролироваться через колесо мыши и клавиатуры, а также можно установить навигацию по списку.
В то же время, если вы хотите сделать горизонтальный эффект вырезания экрана на странице, вы можете добавить Div.Slide в Div.section. Код заключается в следующем:
<div> <div> Слайд 1 </div> <div> Слайд 2 </div> <div> Слайд 3 </div> <div> Слайд 4 </div> </div>
5. Инициализировать полную страницу
$ (document) .ready (function () {$ ('#fullPage'). FullPage ({..... // Подробнее, пожалуйста, см.Настройка навигации по боковой панели
Эта навигация обычно доступна на дизайне сайта. Стиль навигации по навигации по умолчанию - маленькие черные точки, и он также поддерживает настройку других стилей.
<ul id = "mymenu"> <li data-menuanchor = "firstpage"> <a href = "#Firstpage"> Первый раздел </a> </li> <li data-menuanchor = "secondpage"> <a href = "#second page"> второй раздел </a> </li> <li data-menuanchor = "#hlepage"> <ahref "> <ahref"> <ahref "> <ahref"> <ahref "> <ahref"> <ahref "> <ahref" Раздел </a> </li> <li data-menuanchor = "Четвертая страница"> <a href = "#Четвертая страница"> Четвертый раздел </a> </li>
#mymenu {position: исправлена; ...} $ ('#fullPage'). FullPage ({Anchors: ['FirstPage', 'вторая страница', 'третья страница', 'Fourfage', 'Last Page'], меню: '#mymenu'});6. Проблемы, встречающиеся и решения
После того, как веб -сайт был завершен, я обнаружил, что я только что ввел страницу, и до того, как файл FullPage.js был инициализирован, DOM CSS загружался, и все отображаемое содержимое стиля было бы сжато вместе и будет восстановлено после загрузки. Если веб -сайт оптимизирован и скорость Интернета очень мощная, этот период будет коротким, но он все равно принесет плохой пользовательский опыт.
Так что попробуйте различные решения:
1. Див. Раздел
раздел {переполнение: скрыто}
После тестирования этот метод бесполезно.
2. Установите пустую маску, отображается только маска до завершения всех страниц, содержимое темы скрыто, а после загрузки маска отображения контента удаляется. Конечно, вы также можете настроить контент, связанный с веб-сайтом, на слое маски.
Конкретный метод реализации демонстрация:
<html> <Head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <title> unt out write document </title> <script language = "javascript" type = "text/javascript"> showallcontent (status1) {type = " document.getElementbyIdx ("showContent"). style.display = status1; document.getElementByIdx ("showload"). style.display = status2; } </script> </head> <body onload = 'showallcontent ("", "non")'> <div id = "showload" style = "z-index: 2; дисплей: блок; ширина: auto; рост: auto;"> страница загружается ... </div> <dived = "showcontent" style = "z-index: 1; </div>
<script> showallContent ("none", ""); </script>
</body>
</html>
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.