中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用jQuery怎么實現一個滑塊滑動導航效果

發布時間:2021-04-07 17:38:49 來源:億速云 閱讀:175 作者:Leah 欄目:web開發

這期內容當中小編將會給大家帶來有關使用jQuery怎么實現一個滑塊滑動導航效果,文章內容豐富且以專業的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。

具體如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jquery滑動導航</title>
  <style>
    *{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;}
    body {
      font: 16px/20px 'Microsoft yahei,微軟雅黑';
      color: #AFBBBB;
    }
    ul {
      list-style-type: none;
    }
    ul li {
      float: left;
    }
    a {
      text-decoration: none;
      color: #AFBBBB;
    }
    a:hover {
      color: #ffffff;
      cursor: pointer;
    }
    .clearfix:before,.clearfix:after {
      content:"";
      clear: both;
      display: table;
      height: 0;
      zoom: 1;
      overflow: hidden;
    }
    .nav {
      width:519px;
      margin: 0 auto;
    }
    .nav ul {
      background: gray;
      height: 35px;
      line-height: 35px;
      position: relative;
      padding: 0 5px;
    }
    .nav ul li {
      position: relative;
      padding: 0 25px;
    }
    .nav ul li>a {
      position: relative;
      z-index: 100; /*將a元素的z-index設置比li大,這樣hover效果才不會無效*/
    }
    .nav ul li:last-child {
      width: 98px;
      height: 90%;
      position: absolute;
      z-index: 50;
      left: 5px;
      bottom: 0;
      top: 0;
      margin: auto;
      background: rgba(152,206,170,0.5);
      border-radius: 5px;
    }
  </style>
</head>
<body>
<div class="nav">
  <ul class="clearfix">
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >幼兒園</a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >小學</a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >初中</a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >高中</a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >大學</a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >社會</a></li>
    <li class="huadong" id="huaBlock"></li>
  </ul>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<script>
  $(function(){
    $("ul li:not(:last)").hover(function(){
      $("#huaBlock").stop();  //停止正在運行的動畫
      var curliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left; //當前li的偏移量減去當前ul的偏移量就是li距離ul的距離
      // alert("curleft:"+curleft);
      $("#huaBlock").animate({"width":curliWidth,"left":curleft},500);
    },function(){
      $("#huaBlock").stop();
      $("#huaBlock").animate({"width":98,"left": 5},200);
    });
  });
</script>
</body>
</html>

上述就是小編為大家分享的使用jQuery怎么實現一個滑塊滑動導航效果了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

灵石县| 长垣县| 陇川县| 武鸣县| 古交市| 盘山县| 宁城县| 固阳县| 巴里| 商河县| 镇江市| 余江县| 集安市| 车致| 丹江口市| 桦南县| 甘泉县| 本溪市| 壤塘县| 呼伦贝尔市| 新化县| 旬阳县| 长岭县| 汉源县| 芷江| 唐山市| 兴安盟| 修水县| 胶州市| 隆回县| 新兴县| 资中县| 监利县| 桂阳县| 金山区| 建平县| 虹口区| 彩票| 宜宾县| 孟州市| 赞皇县|