欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2016年09月18日 16:12:30   投稿:lijiao  
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

先來看一下中英文切換的導(dǎo)航條效果圖:

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

首先說一下用css3如何實(shí)現(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;
}

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

接著是用jquery實(shí)現(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)
 });
});

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論