No sistema de shopping móvel, geralmente vemos que existe uma caixa de pesquisa na parte superior da página. mapas vagamente.
Para fazer essa caixa de pesquisa, a chave da tecnologia é:
Primeiro de tudo, definimos um fragmento HTML:
<!-Caixa de pesquisa-> <Class de cabeçalho = bar class = espaço reservado> <span class = iconfont icon-sousuo> </span> <span class = text> pesquisa </span> </div> </header> <!-um mapa de fundo é na verdade um mapa de rotação- > <div class = background> <img src = bg.jpg> </div>
A tag de cabeçalho é a caixa de pesquisa e a seguinte div é um mapa de fundo.
Ao mesmo tempo, o estilo CSS está anexado:
<Tipo de estilo = Texto/CSS> Corpo {margem: 0; Barra {pose: fixo; * Pesquise o efeito transparente*/ Z-Index: 10; } -Radius: 6px; Positivo: Absoluto; Alinhe: Centro; Cor: #666;}. Esquerda: 5px; >Um longo período de estilo CSS, mas seu núcleo é duas frases: corrigido; O estilo do estilo é para a digitação da página.
Dessa forma, concluímos uma caixa de pesquisa estática:
Observações: O ícone de pesquisa aqui usa iconfont e os leitores podem fazer o download na biblioteca de ícones do iconfont Vector por conta própria.
Neste ponto, também precisamos alcançar alguns efeitos de movimento por meio de JS:
É usado para realizar a comutação de ícone de "pesquisa" durante a entrada de comutação do usuário.
.Active: Posição: Absoluto; .Active .placeholder {display: nenhum} <script type = text/javascript>/* caixa de entrada para obter o foco indicando que o usuário está entrando*/$ (#word) .focusin () () {$ (. Ver. Archrow) .Addclass (ICONFONT ATIVO ICONS-SUSUO);/* Caixa de entrada Lost Focus indica que o usuário entra*/$ (#word) .focusout (function () {/* determina se o usuário possui entrada de conteúdo*/ if ($ (this) .val () ==) { /* Nenhum estilo de alteração de entrada de conteúdo* /$ (. .submit ();}});Observações: Você precisa apresentar jQuery aqui, não se esqueça!
ExtensãoCódigo HTML completo:
<! = styleshet tipo = texto/css href = iconfont/iconfont.css> <script type = text/javascript src = jQuery -.11.1.min.js> </script> <estilo type = text/css> body {margin: 0 Paddão: 0; * Determine a caixa de pesquisa* / altura: 44px; : Bloco; Altura: 21px; Alinhe: Centro; Border: 0; -Height: 24px; ;}. Text-align: Esquerda} .Active .placeholder {display: nenhum} </style> </head> <body> <!--search box-> <header class = bar> <nome do formulário = pesquisa de pesquisa = pesquisa de pesquisa = ID = ID = Ação de pesquisa => <div class = pesquisa-eat> <time de entrada = pesquisa de pesquisa = word id = word> span class = spaceholder> <span class = iconfont icon-sausuo> </span> <span class = text> pesquisa < /span> </div> </wewer> <!-Um mapa de fundo é realmente real aqui é frequentemente um mapa de rotação-> <div class = background> <img src = bg.jpg> </body> <script type = Text/JavaScript>/* Caixa de entrada para obter o foco indicando que o usuário está em Enter*/$ (#word) .focusin (function () {$ (). Pesquise-download) .addclass (ICONFONT ATIVO ICON-SUSUO) ; /* Caixa de entrada perdeu o foco para indicar a entrada do usuário* /$ (# word) .focusout (function () { /* determinar se o usuário tem a entrada de conteúdo* /se (this). Vis () ==) { /* Nenhuma entrada de conteúdo para alterar o estilo* /$ (. (#search) .submit ();}); ResumirO acima é a implementação HTML da caixa de pesquisa semi -transparente do terminal móvel. Espero que seja útil para todos. Muito obrigado pelo seu apoio ao site VevB Wulin!