基于jQuery實現中英文切換導航條效果

2019-11-20 08:57:27

字體：大中小

來源：轉載

供稿：網友

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

我采用了兩種方式實現，一種用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) });});

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