基于jQuery實現(xiàn)中英文切換導航條效果

更新時間：2016年09月18日 16:12:30 投稿：lijiao

這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)中英文切換導航條效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下

先來看一下中英文切換的導航條效果圖：

我采用了兩種方式實現(xiàn)，一種用css3,另一種是用jquery實現(xiàn)。

首先說一下用css3如何實現(xiàn)：

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;
}

紅色部分就是這個過程的實現(xiàn)，利用位置的變化，當鼠標移上去的時候，顯示中文，也就是將英文移開，值得注意的是，需要利用overflow:hidden屬性，將其隱藏。如果想要速度慢一點的話，可以利用transition屬性設置變化時間，就可以減慢變化速度。

接著是用jquery實現(xiàn)：

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)
 });
});

實現(xiàn)功能的重點是animate()函數(shù)的實現(xiàn)，通過設置margin-top和時間實現(xiàn)，為了防止快速經(jīng)過時，所有的都會變化（如下圖所示），需要在animate()函數(shù)前面加上stop()函數(shù)，即在所有動畫之前，先停止其他的動畫，然后再開始這個動畫。