jQueryを使った中英文切り替えナビゲーションバーの効果

まずは以下を見てみましょう。中英両言語のナビゲーションバー效果图：

私は二つの方法を使用して実現しました。一つはCSSを使用します。3もう一つの方法はjQueryを使用するものです。

まずCSSについて説明します。3実現方法は以下の通りです：

html：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">-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>ホーム</b>
 <i>ホーム</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>フォーラム</b>
 <i>フォーラム</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>ブログ</b>
 <i>ブログ</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>ショッピング</b>
 <i>ショッピング</i>
 </a>
 </li>
 <li>
 <a href="index.html">
 <b>ダウンロード</b>
 <i>ダウンロード</i>
 </a>
 </li>
 </ul>
 </div>
</body>
</html>

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;
 transition: 0s;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-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)
 });
});

機能を実現するための重点はanimate()関数の実現で、marginを設定することです。-topと時間を実現するため、急速に通過を防ぐために、すべての変化（以下の図を参照）が行われます。animate()関数の前にstop()関数を追加する必要があります。つまり、すべてのアニメーションの前に、他のアニメーションを停止してからこのアニメーションを開始します。

これで本文のすべてが終わります。皆様の学習に役立てば幸いですし、ナイアラツアーを多くのサポートをお願いします。

基本教程