Acabo de construir el sitio web de la compañía y me desplazé a través de la pantalla completa, lo que mejoró significativamente la experiencia de navegación del sitio web oficial. Entonces, resumamos el método de usar FullPage.js. Bienvenido para corregirme
1. Introducción a FullPage.js
FullPage.js es un conjunto de complementos JS que implementan desplazamiento de pantalla completa del navegador. Muchos sitios web ahora lo usan para lograr una mejor experiencia de navegación.
Funciones que se pueden lograr:
• Soporte hacia adelante y hacia atrás y el control del teclado
• Múltiples funciones de devolución de llamada
• Soporte de eventos táctiles de teléfonos móviles y tabletas
• Admite animaciones CSS3
• Soporte de la ventana del zoom
• Ajuste automático cuando se acerca la ventana
• Puede establecer ancho de desplazamiento, color de fondo, velocidad de desplazamiento, opciones de bucle, devoluciones de llamada, alineación de texto, etc.
2. Descargar el complemento
NPM | NPM Instalar fullPage.js
Bower | Bower Install FullPage.js
github | https: //github.com/alvarotrigo/fullpage.js/
cdn | https: //cdnjs.com/libraries/fullpage.js
3. Método de introducción de archivo
<link rel = "stylesheet" href = "css/jquery.fullPage.css"> <script src = "js/jQuery.min.js"> </script> <script src = "js/jQuery.fullPage.js"> </script> </script>
Nota: primero debe introducir jQuery y luego introducir la página completa. Cuando comencé a escribir una demostración, el efecto no se logró debido al orden incorrecto y el error del navegador en FullPage.js. JQuery está indefinido.
4. Escribir código HTML
<Div id = "FullPage"> <iv> Sección1 </div> <iv> Sección2 </div> <div> Sección3 </div> <div> Sección 4 </div> </div>
Todo el contenido está incluido en el DIV con la página completa del nombre de ID, y no puede agregar esto al cuerpo.
El elemento Div con el nombre de clase .section es una sola página. El reemplazo entre diferentes páginas se puede controlar a través de la rueda del mouse y el teclado, y la navegación de la lista también se puede establecer.
Al mismo tiempo, si desea hacer un efecto de corte de pantalla horizontal en una página, puede agregar Div.Slide en Div.Section. El código es el siguiente:
<Div> <div> diapositiva 1 </div> <div> diapositiva 2 </div> <div> diapositiva 3 </div> <div> diapositiva 4 </div> </div>
5. Inicializar la página completa
$ (documento) .Ready (function () {$ ('#fullpage'). fullPage ({..... // Opciones para más detalles, consulte https://github.com/alvarotrigo/fullpage.js/});});Configuración de la navegación de la barra lateral
Esta navegación generalmente está disponible en el diseño del sitio web. El estilo de navegación predeterminado de la página completa son los pequeños puntos negros, y también admite la configuración de otros estilos.
<ul id = "mymenu"> <li data-Menuanchor = "FirstPage"> <a href = "#FirstPage"> Primera sección </a> </li> <li data-Menuanchor = "Secondpage"> <a href = "#Secondpage"> Second Sección </a> </li> <li Data-Menuanchor = "SercetPage"> <a hrefe " Sección </a> </li> <li data-Menuanchor = "FourthPage"> <a href = "#FourthPage"> Cuarta sección </a> </li>
#mymenu {posición: fijo; ...} $ ('#fullPage'). FullPage ({Anchors: ['FirstPage', 'SecondPage', 'ThirdPage', 'FourthPage', 'LastPage'], Menú: '#Mymenu'});6. Problemas encontrados y soluciones
Después de que se completó el sitio web, descubrí que acabo de ingresar a la página y antes de que se inicializara el archivo FullPage.js, el DOM CSS se estaba cargando y todos los contenidos de estilo mostrado se apretarían y se restaurarían después de la carga. Si el sitio web está optimizado y la velocidad de Internet es muy poderosa, este período será corto, pero aún traerá una mala experiencia de usuario.
Así que prueba varias soluciones:
1.div.section
Sección {Desbordamiento: Hidden}
Después de la prueba, este método no tiene uso.
2. Establezca una máscara en blanco, solo se muestra la máscara antes de completar todas las páginas, el contenido del tema está oculto y después de la carga, se elimina la máscara de pantalla de contenido. Por supuesto, también puede configurar contenido relacionado con el sitio web en la capa de máscara.
Demo del método de implementación específico:
<html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <title> title titled document </title> <script language = "javaScript" type = "text/javaScript"> función showallcontent (status1, status2) { document.getElementByIdx ("showContent"). style.display = status1; document.getElementByIdx ("showload"). style.display = status2; } </script> </head> <body onload = 'showallContent ("", "ninguno")'> <div id = "showload" style = "z-index: 2; display: block; width: auto; altura: auto;"> la página está cargando ... </div> <div id = "showcontent" style = "z-index. </div>
<script> showAllContent ("Ninguno", ""); </script>
</body>
</html>
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.