Efecto de cambio de navegación entre chino e inglés basado en jQuery

, and the other using jQuery.I have adopted two methods to implement, one using css, another way is to use jQuery.

How to implement: first let's talk about using css3html:

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

<head>

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

html>

*{
 margin: 0px;
 padding: 0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 background-color: #222;
 margin-top:100px;
 overflow: hidden;
}
.nav-list{
 width:1000px;
 margin:0 auto;
 height: 40px;
}
.nav-list li {
 float: left;
}
.nav-list li a{
 display: block;
 css:2transition: 0s;
}
.nav-list li b,.nav-list li i{
 color:#aaa;
 line-height: 40px;
 display: block;
 padding:0 30px;
 text-align: center;
}
.nav-list li b{
 font-weight:normal;
}
.nav-list li i{
 font-style: normal;
 color:#fff;
 background-color: #333;
}
.nav-s;
 margin-top:-40px;
}

list li a:hover{

Next is the implementation using jQuery: the red part is the implementation of this process, using position changes, when the mouse moves over it, it displays Chinese, that is, it moves the English away. It is worth noting that you need to use the overflow: hidden property to hide it. If you want the speed to be slower, you can use the transition property to set the change time, which can slow down the change speed.

css:

*{
 margin: 0px;
 padding: 0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 background-color: #222;
 margin-top:100px;
 overflow: hidden;
}
.nav-list{
 width:1000px;
 margin:0 auto;
 height: 40px;
}
.nav-list li {
 float: left;
}
.nav-list li a{
 display: block;
}
.nav-list li b,.nav-list li i{
 color:#aaa;
 line-height: 40px;
 display: block;
 padding:0 30px;
 text-align: center;
}
.nav-list li b{
 font-weight:normal;
}
.nav-list li i{
 font-style: normal;
 color:#fff;
 background-color: #333;
}

jquery:

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

El punto clave de la implementación de la función es la implementación de animate(), a través de la configuración de margin-La implementación de top y tiempo para evitar que se pase rápidamente, todos cambiarán (como se muestra en la imagen siguiente), se necesita agregar la función stop() antes de animate(), es decir, detener primero otras animaciones antes de comenzar esta animación.

Esto es todo el contenido de este artículo, espero que haya sido útil para su aprendizaje y que nos apoyen más en el tutorial de clamor.

Tutoriales básicos

Te gustará