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

jQuery實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)導(dǎo)航代碼(移動(dòng)端)

 更新時(shí)間：2017年05月22日 16:14:04   作者：csdn_chenli  
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)導(dǎo)航代碼,適合用于移動(dòng)端。需要的朋友可以參考下

1.1 App滑動(dòng)導(dǎo)航

說(shuō)明：這個(gè)例子主要是實(shí)現(xiàn)一條導(dǎo)航山只有兩個(gè)選項(xiàng)的。

1.適合用于移動(dòng)端。

2.滑動(dòng)條的長(zhǎng)度是選項(xiàng)內(nèi)容的長(zhǎng)度。

1.1.1. 效果圖 

1.1.2. Html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>滑動(dòng)導(dǎo)航</title>
 </head>
 <body>
 <ul class="slid">
  <li><a href="#" rel="external nofollow" rel="external nofollow" >滑動(dòng)到崗</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" >滑動(dòng)到崗</a></li>
  <span id="navLine"></span>
 </ul>
 <script type="text/JavaScript" src="js/jQuery-1.9.1.min.js"></script>
 </body>
</html>

1.1.3. Css

<style type="text/css">
 body,div,p{ 
   margin:0; 
   padding:0; 
  }   
  ul.slid{
   display: block;   
   position:fixed;
   top: 10px; 
   left:0px; 
   right:0px;        
   height:60px;
   background: #f2f2f2;
   overflow: height;  
  }
  ul.slid li{
   display: inline-block;
   width: 49%;
   height: 40px;
   margin-top: 10px;
   float: left;
   text-align: center;
   overflow: hidden;
 
  }
   ul.slid li:first-child{
   border-right: 1px solid red;
   }
  ul.slid li a{
   display: inline-block;    
   width: 120px;       
   text-decoration:none; 
   height:37px;
   line-height: 37px; 
   color: #898989;   
   overflow: hidden;
  }
  ul.slid li a:hover{
   color: red;
  }
  #navLine{
   height:2px; 
   background-color:red; 
   position:absolute;    
   bottom:7px; 
   width:0px; 
   left:0px; 
   display:none; 
   overflow:hidden;
  }
 </style>

1.1.4. jQuery

<script type="text/javascript">
 $(function (){   
   navSlid();
  });
  //滑動(dòng)導(dǎo)航
  var navSlid = function(){ 
   var nline = $('#navLine'); 
   var lia = $('ul.slid li a'); 
   //初始化滑塊 
   nline.css({ 
    'width':lia.width(), 
    'left' :parseInt(lia.position().left) 
   }); 
   $('ul.slid li a').mouseenter(function(){ 
    //顯示滑塊 
    if(nline.css('display') == 'none'){ 
     nline.show(); 
    }; 
    //移動(dòng)滑塊 
    nline.stop().animate({ 
     width: $(this).width(), 
     left: parseInt($(this).position().left) 
    },300); 
   }); 
  }; 
 </script>

相關(guān)文章

最新評(píng)論