Acabei de construir o site da empresa e rolei pela tela cheia, o que melhorou significativamente a experiência de navegação do site oficial. Então, vamos resumir o método de usar o FullPage.js. Bem -vindo para me corrigir
1. Introdução ao FullPage.js
FullPage.js é um conjunto de plug-ins JS que implementam rolagem de tela cheia do navegador. Muitos sites agora o usam para obter uma melhor experiência de navegação.
Funções que podem ser alcançadas:
• Suporte para frente e para trás e controle do teclado
• Múltiplas funções de retorno de chamada
• Suportar eventos de telefone celular e toque de tablet
• Apoie as animações CSS3
• Zoom da janela de suporte
• Ajuste automático quando a janela zoom
• Pode definir largura de rolagem, cor de fundo, velocidade de rolagem, opções de loop, retornos de chamada, alinhamento de texto etc.
2. Download do plug -in
npm | npm install 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 introdução de arquivo
<link rel = "Stylesheet" href = "css/jquery.fullpage.css"> <script src = "js/jquery.min.js"> </cript> <script src = "js/jquery.fullpage.js"> </script>
NOTA: Você deve primeiro apresentar o jQuery e depois introduzir o FullPage. Quando comecei a escrever uma demonstração, o efeito não foi alcançado devido à ordem errada e ao erro do navegador no FullPage.js. JQuery é indefinido.
4. Escreva o código HTML
<div id = "fullpage"> <div> seção1 </div> <div> seção2 </div> <div> seção3 </div> <div> seção4 </div> </div>
Todo o conteúdo está incluído na div com o nome de identificação Fullpage, e você não pode adicionar isso ao corpo.
O elemento div com o nome da classe. Seção é uma única página. A substituição entre diferentes páginas pode ser controlada através da roda do mouse e do teclado, e a navegação da lista também pode ser definida.
Ao mesmo tempo, se você deseja fazer um efeito de corte de tela horizontal em uma página, poderá adicionar div.slide no Div.Section. O código é o seguinte:
<div> <div> slide 1 </div> <div> slide 2 </div> <div> slide 3 </div> <div> slide 4 </div> </div>
5. Inicialize a página completa
$ (document) .ready (function () {$ ('#fullpage'). FullPage ({..... // Opções para obter detalhes, consulte https://github.com/alvarotrigo/fullpage.js/});});Configurando a navegação na barra lateral
Essa navegação geralmente está disponível no design do site. O estilo de navegação padrão da FullPage é pequeno pontos pretos e também suporta definir outros estilos.
<ul id = "mymenu"> <li data-menuanchor = "primeiropage"> <a href = "#FirstPage"> primeira seção </a> </li> <li data-menuanchor = "SecondPage"> <a href = "#segundo"> seção "> Segunda seção </a> </li> <i data-mnuanchs =" SecondPage "> Segunda </a> </li> <i> <a data-mnuanch ="#secondPage "> Seção </a> </li> <li data-menuanchor = "fourthpage"> <a href = "#fourthpage"> quarta seção </a> </li>
#mymenu {position: corrigido; ...} $ ('#FullPage'). FullPage ({âncoras: ['FirstPage', 'SecondPage', 'TerceiraPage', 'FourthPage', 'LastPage'], Menu: '#mymenu'});6. Problemas encontrados e soluções
Depois que o site foi concluído, descobri que acabei de inserir a página e antes que o arquivo FullPage.js fosse inicializado, o DOM CSS estava carregando e todo o conteúdo do estilo exibido seria espremido e seria restaurado após o carregamento. Se o site for otimizado e a velocidade da Internet for muito poderosa, esse período será curto, mas ainda trará uma má experiência do usuário.
Portanto, tente várias soluções:
1.Div.Section
Seção {Overflow: Hidden}
Após o teste, esse método não tem uso.
2. Defina uma máscara em branco, apenas a máscara é exibida antes da conclusão de todas as páginas, o conteúdo do tema está oculto e, após o carregamento, a máscara de exibição de conteúdo é removida. Obviamente, você também pode configurar o conteúdo relacionado ao site na camada de máscara.
Demoção de método de implementação específica:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <titter> unt Documento titulado </ititle> <script linguagem = "javascript" type = "text/javascript"> ShowallContent (status1, status2) { document.getElementByidx ("ShowContent"). style.display = status1; document.getElementByidx ("ShowLoad"). style.display = status2; } </script> </ad Head> <corpo onLload = 'ShowAllContent ("", "nenhum")'> <div id = "showLoad" style = "z-index: 2; display: block; largura: auto; altura: selão;"> a página está carregando ... </div>
<Cript> ShowAllContent ("nenhum", ""); </sCript>
</body>
</html>
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.