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

各式各樣的導航條效果css3結(jié)合jquery代碼實現(xiàn)

 更新時間:2016年09月17日 14:43:30   作者:u010297791  
這篇文章主要為大家分享了css3結(jié)合jquery代碼實現(xiàn)各式各樣的導航條效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下

導航條的使用很廣,每個網(wǎng)站都會做出具有自己特色的導航條。最近特地去了解了各種類型的導航條,比如具有高亮顯示的導航條,中英文互相切換的導航條,具有彈性動畫的導航條,甚至是具有摩擦運動動畫的導航條(文字下面有橫線)等。每種導航條都有自己的特色,比如高亮顯示的導航條看起來比較簡單,但是視覺效果還不錯,具有動畫效果的導航條在視覺上也是有很好的效果。 

接下來將會一一介紹4種應用比較廣的導航條,即:高亮顯示的導航條,中英文互相切換的導航條,具有彈性動畫的導航條,具有摩擦運動動畫的導航條。 

1、高亮顯示的導航條 

這種導航條:當你點擊某一個導航時,就讓他高亮顯示,其他的默認原來的樣式,也就是說在不改變菜單CSS代碼的情況下,用Js控制菜單的背景,假如該菜單項被點擊后,將賦予它一個與眾不同的背景顏色或背景圖像,這樣可以清淅的指引用戶下在瀏覽的網(wǎng)站欄目,簡單方便而且效果好。 

效果圖如下:

 

html:(這里省略了其他html文件的代碼,只貼出一個index.html的代碼)

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>首頁</title>
 <link href="../css/demo1.css" rel="stylesheet" type="text/css">
 <script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script>
 <script src="../js/demo1.js" language="javascript" charset="utf-8"></script>
</head>
<body>
 <div class="nav">
 <ul class="nav-list">
  <li><a href="index.html">首頁</a></li>
  <li><a href="bbs.html">論壇</a></li>
  <li><a href="blog.html">博客</a></li>
  <li><a href="mall.html">商城</a></li>
  <li><a href="download.html">下載</a></li>
 </ul>
 </div>
 <div class="content">首頁</div>
</body>
</html>css:
 *{
 margin:0px;
 padding:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
.nav{
 background-color: #222;
 height: 40px;
 width:100%;
 margin-top:50px;
}
.nav-list{
 width: 1000px;
 margin: 0 auto;
}
.nav-list li{
 list-style: none;
 float: left;
}
.nav-list li a{
 color: #aaa;
 padding:0 40px;
 text-decoration: none;
 line-height: 40px;
 display: block;
 border: none;
}
.content{
 margin:20px auto;
 text-align: center;
}
.nav-list li a:hover{
 color: #fff;
 background: #504d4d;
}
<span style="color:#ff0000;">.nav-list li a.on{
 color: #fff;
 background: #504d4d;
}</span>jquery:


$(function(){
 var index = (window.location.href.split("/").length)-1;
 var href = window.location.href.split("/")[index].substr(0,4);
 if (href!=null){
 $(".nav-list li a[href^='"+href+"']").addClass("on");
 }else{
 $(".nav-list li a[href='index.html']").addClass("on");
 }
});

其中主要的知識點在于如何檢測當前網(wǎng)頁的網(wǎng)址和a標簽中的href對應,然后相應地改變樣式,在這里用了window.location.href的方法去獲取網(wǎng)頁當前的網(wǎng)站,用split()切割,最后一部分的內(nèi)容就是我們想要的。在正常情況下,并不需要完全匹配整個網(wǎng)址,所以在這里用了substr()的方法匹配前幾位字母。我在css文件中添加了on類,通過給a標簽增加class=“on”,然后通過js中的addClass()方法就完成了功能。 

2、中英文切換的導航條

先來看一下效果圖: 

我采用了兩種方式實現(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屬性設(shè)置變化時間,就可以減慢變化速度。 

接著是用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),通過設(shè)置margin-top和時間實現(xiàn),為了防止快速經(jīng)過時,所有的都會變化(如下圖所示),需要在animate()函數(shù)前面加上stop()函數(shù),即在所有動畫之前,先停止其他的動畫,然后再開始這個動畫。 

3、帶有彈性動畫的導航條 

我采用了三種方式實現(xiàn),第一種是css3,第二種是jquery,第三種是jquery easing實現(xiàn)。效果圖如下: 

因為三種的布局是一樣的,所以就直接附上html的結(jié)構(gòu)代碼。 

html:

  <div class="nav">
  <ul class="nav-list">
   <li>
    <a href="#">首頁</a>
   </li>
   <li>
    <a href="#">論壇</a>
    <div class="nav-down">
     <a href="#">java論壇</a>
     <a href="#">js論壇</a>
     <a href="#">jquery論壇</a>
     <a href="#">css3論壇</a>
    </div>
   </li>
   <li>
    <a href="#">博客</a>
    <div class="nav-down">
     <a href="#">精彩博文</a>
     <a href="#">博客專欄</a>
     <a href="#">博客專家</a>
     <a href="#">我的博客</a>
    </div>
   </li>
   <li>
    <a href="#">商城</a>
    <div class="nav-down">
     <a href="#">軟件商城</a>
     <a href="#">C幣商城</a>
     <a href="#">C幣充值</a>
    </div>
   </li>
   <li>
    <a href="#">下載</a>
    <div class="nav-down">
     <a href="#">資源分類</a>
     <a href="#">我的資源</a>
    </div>
   </li>
  </ul>
 </div>

第一種:css3實現(xiàn)

 *{
 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;
 margin-top:50px;
 background-color: #222;
}
.nav .nav-list{
 width: 1000px;
 height: 40px;
 margin:0 auto;
}
.nav .nav-list li{
 float: left;
 position: relative;
}
.nav .nav-list li > a{
 display: block;
 height: 40px;
 line-height: 40px;
 padding:0 30px;
 color:#aaa;
 width:60px;
}
.nav .nav-list li:hover>a{
 color:#fff;
 background-color: #333;
}
<span style="color:#ff0000;">.nav .nav-list li:hover .nav-down{
 display: block;
}</span>
.nav-down{
 width:150px;
 background-color: #333;
 position: absolute;
 top:40px;
 left:0px;
 display: none;
}
.nav .nav-list .nav-down a{
 display: block;
 line-height: 30px;
 color:#aaa;
 padding-left:30px;
}
<span style="color:#ff0000;">.nav .nav-list .nav-down a:hover{
 color:#fff;
 background-color: #333;
}</span>

實現(xiàn)方法很簡單,即剛開始讓下拉的菜單隱藏,然后當鼠標經(jīng)過的時候,將隱藏的菜單顯示即可,具體實現(xiàn)代碼如上的紅色部分,這里不作詳細講解,代碼很簡單。

第二種:用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;
 margin-top:50px;
 background-color: #222;
}
.nav .nav-list{
 width: 1000px;
 height: 40px;
 margin:0 auto;
}
.nav .nav-list li{
 float: left;
 position: relative;
}
.nav .nav-list li > a{
 display: block;
 height: 40px;
 line-height: 40px;
 padding:0 30px;
 color:#aaa;
 width:60px;
}
.nav .nav-list li:hover>a{
 color:#fff;
 background-color: #333;
}
.nav-down{
 width:150px;
 background-color: #333;
 position: absolute;
 top:40px;
 left:0px;
 display: none;
}
.nav .nav-list .nav-down a{
 display: block;
 line-height: 30px;
 color:#aaa;
 padding-left:30px;
}
.nav .nav-list .nav-down a:hover{
 color:#fff;
 background-color: #333;
}

jquery:

$(function(){
 $(".nav .nav-list li").hover(function(){
  $(this).find(".nav-down").stop().slideDown()
 },function(){
  $(this).find(".nav-down").stop().slideUp()
 });
});

實現(xiàn)方法之前也講過,在仿造百度換膚功能的部分,在這里采用的是slideDown()和slideUp()方法,如果想要設(shè)置變化時間,可以直接在括號中填入時間即可。 

第三種:用jquery.easing實現(xiàn)。 

css的樣式跟用jquery實現(xiàn)的樣式一樣,這里就不增加空間再復制一遍了。 

jquery: 

<pre name="code" class="javascript">$(function(){
 $(".nav .nav-list li").hover(function(){
  $(this).find(".nav-down").stop().slideDown({duration:500,easing:"easeOutBounce"})
 },function(){
  $(this).find(".nav-down").stop().slideUp({duration:500,easing:"easeOutBounce"})
 });
});
 

使用這種方法實現(xiàn)時記得引進包jquery.easing.1.3.min.js(我用的是這個版本,大家可以自行在網(wǎng)上下載)。在這里重點說一下思路:當鼠標移動的時候, 彈性下拉菜單會跟隨著下滑,當鼠標移開的時候,彈性下拉菜單會上滑,同樣用到了前面所說的slideDown()和slideUp()方法,唯一不同的是在這里增加了動畫,即采用easing實現(xiàn),它其實就是類似于json的格式,插入duration和easing方式就可以,如果不懂里面的實現(xiàn)過程,可以查一下相關(guān)的說明文檔,看看就會了。 

4、摩擦運動動畫跟隨的導航條 

實現(xiàn)思路就是:將鼠標移動的時候,把橫條的位置移動到當前文字的下方。所以需要獲取當前鼠標移動到的位置,即top和left,然后將橫條的top和left相應地改變就可以實現(xiàn),具體實現(xiàn)如下。 

html:(這里只貼上一個頁面的代碼) 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>摩擦運動動畫跟隨的導航條</title>
 <link href="../css/demo7.css" rel="stylesheet">
 <script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script>
 <script src="../js/jquery.easing.1.3.min.js" language="javascript" charset="utf-8"></script>
 <script src="../js/demo7.js" language="javascript" charset="utf-8"></script>
</head>
<body>
 <div class="nav">
  <div class="nav-content">
   <ul class="nav-list">
    <li><a href="index.html">首頁</a></li>
    <li><a href="bbs.html">論壇</a></li>
    <li><a href="blog.html">博客</a></li>
    <li><a href="mall.html">商城</a></li>
    <li><a href="download.html">下載</a></li>
   </ul>

   <div class="nav-line"></div>
  </div>
 </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;
 margin-top:50px;
 background-color: #f6f6f6;
}
.nav .nav-content{
 width:1000px;
 margin:0 auto;
 height: 40px;
 position: relative;
}
.nav .nav-list li{
 float: left;
}
.nav .nav-list li a{
 color:#333;
 height: 40px;
 line-height: 40px;
 display: block;
 padding:0 30px;
}
.nav .nav-line{
 height:3px;
 background: #35b558;
 width:100px;
 position: absolute;
 top:40px;
 left:0px;
}
.nav .nav-list li a:hover{
 color:#35b558;
}
.nav .nav-list li a.on{
 color:#35b558;
}

jquery:

$(function () {
 var index = window.location.href.split("/").length-1;
 var href = window.location.href.split("/")[index];
 $(".nav .nav-list li a[href='"+href+"']").addClass("on");

 var li_width = $(".nav .nav-list li a.on").outerWidth();
 var li_left = $(".nav .nav-list li a.on").position().left;
 $(".nav-content .nav-line").css({width:li_width,left:li_left});

 $(".nav .nav-list li").hover(function(){
  var li_width = $(this).outerWidth();
  var li_left = $(this).position().left;
  $(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"});
 },function(){
  $(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"});
 });
});

主要說幾個方法的作用:

1)outerwidth()獲取元素的寬度(因為文字的個數(shù)不同,寬度就不一樣,為了好看,橫條需要適應文字的寬度); 

2)position().left獲取元素的位置中l(wèi)eft的值; 

3)animate()實現(xiàn)動畫效果; 

4)duration和easing都是jquery easing插件的內(nèi)容,即設(shè)置動畫的效果。 

在這里,所有的分享就結(jié)束了。

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論