Esempio di navigazione a barra di scorrimento in italiano e inglese basata su jQuery

先来看一下中英文切换的导航条效果图：

我采用了两种方式实现，一种用css3,另一种是用jquery实现。

首先说一下用css3如何实现：

html：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>首页</title>
 <link rel="stylesheet" href="../css/demo2.css">
</head>
<body>
 <div class="nav">
 <ul class="nav-list">
 <li>
 <a href="index.html">
 <b>index</b>
 <i>首页</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>bbs</b>
 <i>论坛</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>blog</b>
 <i>博客</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>mall</b>
 <i>商城</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>download</b>
 <i>下载</i>
 </a>
 </li>
 </ul>
 </div>
</body>
</html>

css:

*{
 margin:0px;
 padding:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-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;
 transition: 0.2s;
});
.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-list li a:hover{
 margin-top:-40px;
});

红色部分就是这个过程的实现，利用位置的变化，当鼠标移上去的时候，显示中文，也就是将英文移开，值得注意的是，需要利用overflow:hidden属性，将其隐藏。如果想要速度慢一点的话，可以利用transition属性设置变化时间，就可以减慢变化速度。

接着是用jquery实现：

css：

*{
 margin:0px;
 padding:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-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);
 });
});

Il punto chiave dell'implementazione della funzione è l'implementazione della funzione animate(), che viene realizzata tramite la impostazione di margin-top e tempo, per prevenire che tutti i cambiamenti vengano effettuati rapidamente (come mostrato nell'immagine seguente), è necessario aggiungere la funzione stop() prima della funzione animate(), ovvero fermare prima tutte le altre animazioni e poi iniziare questa animazione.

Questo è tutto il contenuto dell'articolo, spero che sia utile per il vostro studio e che sosteniate il tutorial Yell.

Manuale di base