Efeito de navegação de troca de idioma baseado em jQuery

Adoptei dois métodos para implementar, um usando css, outra é usar jquery implementar.Primeiro, vamos falar sobre o uso de css

Como implementar:3html:

<!DOCTYPE html>3<html lang="en">

<head>

<meta charset="UTF-8
">
<title>Home<
 title>-8<link rel="stylesheet" href="..
 css/demo
 .css">/head>/<body>2<div class="nav">
body>/<ul class="nav
list">
 <b>index<
 b>-<i>Home<
 <i>Loja<
 <li>
 <b>bbs</<b>download<
 b>/<i>Download<
 body>/i>
 body>/a>
 <i>Loja<
 <li>
 <i>Forum</<b>download<
 <b>blog</<i>Download<
 body>/i>
 body>/a>
 <i>Loja<
 <li>
 b>/<b>download<
 <i>Blog</<i>Download<
 body>/i>
 body>/a>
 <i>Loja<
 <li>
 <b>mall</<b>download<
 b>/<i>Download<
 body>/i>
 body>/a>
 <i>Loja<
 <li>
 <a href="index.html">/<b>download<
 b>/<i>Download<
 body>/i>
 body>/a>
 body>/li>
 body>/ul>
body>/div>
body>/<

html>

*{
 margin: 0px;
 padding: 0px;
 fonte-family: "Microsoft Yahei", Helvetica, sans-serif-serif, Lato;
}
li{
 list-estilo: none;
}
a{
 texto-decoration: none;
}
.nav{
 largura:100%;
 altura: 40px;
 fundo-cor: #222;
 margem-top:100px;
 desbordamento: oculto;
}
.nav-list{
 largura:1000px;
 margem:0 auto;
 altura: 40px;
}
.nav-list li {
 flutuante: esquerda;
}
.nav-list li a{
 exibição: bloco;
 css:2transition: 0.
}
.nav-list li b,.nav-list li i{
 cor:#aaa;
 linha-altura: 40px;
 exibição: bloco;
 preenchimento:0 30px;
 texto-alinhamento: centro;
}
.nav-list li b{
 fonte-peso:normal;
}
.nav-list li i{
 fonte-estilo: normal;
 cor:#fff;
 fundo-cor: #333;
}
.nav-s;
 margem-top:-40px;
}

list li a:hover{

A parte vermelha é a implementação deste processo, utilizando a mudança de posição, ao passar o mouse, exibe o chinês, também é conhecido como deslocar o inglês. É importante notar que é necessário usar a propriedade overflow: hidden para ocultar. Se desejar que a velocidade seja mais lenta, pode usar a propriedade transition para ajustar o tempo de mudança, o que pode reduzir a velocidade de mudança.

css:

*{
 margin: 0px;
 padding: 0px;
 fonte-family: "Microsoft Yahei", Helvetica, sans-serif-serif, Lato;
}
li{
 list-estilo: none;
}
a{
 texto-decoration: none;
}
.nav{
 largura:100%;
 altura: 40px;
 fundo-cor: #222;
 margem-top:100px;
 desbordamento: oculto;
}
.nav-list{
 largura:1000px;
 margem:0 auto;
 altura: 40px;
}
.nav-list li {
 flutuante: esquerda;
}
.nav-list li a{
 exibição: bloco;
}
.nav-list li b,.nav-list li i{
 cor:#aaa;
 linha-altura: 40px;
 exibição: bloco;
 preenchimento:0 30px;
 texto-alinhamento: centro;
}
.nav-list li b{
 fonte-peso:normal;
}
.nav-list li i{
 fonte-estilo: normal;
 cor:#fff;
 fundo-cor: #333;
}

jquery:

$(function(){
 $(".nav-list li a").hover(function(){
 $(this).stop().animate({"margin-top":-40},200)
 },function(){
 $(this).stop().animate({"margin-top":0},200)
 });
});

O ponto crucial da implementação da função é a implementação da função animate(), através da configuração de margin-Implementação de top e tempo, para evitar passar rapidamente, todos eles mudarão (como mostrado na figura a seguir), é necessário adicionar a função stop() antes da função animate(), ou seja, parar todas as outras animações antes de começar essa animação.

Isso é tudo o que há no artigo, esperamos que ajude no seu aprendizado e que você apoie o tutorial gritar.

Manual básico