Heim > Artikel > Web-Frontend > So implementieren Sie das Scrollen des Tab-Menüs mit jQuery_jquery

So implementieren Sie das Scrollen des Tab-Menüs mit jQuery_jquery

WBOYOriginal: 2016-05-16 15:38:301129Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery das Scrollen des Tab-Menüs implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein jQuery-Code, der Ihr Tab-Menü zum Scrollen bringt. Ist es nicht großartig, dass Ihre Webseite flexibler wird und nicht mehr statisch ist? kann als Referenzbeispiel verwendet werden.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-tab-menu-cha-style-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>jQuery 让你的Tab菜单滚动的代码</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
 body {
  font-family:arial;
  font-size:12px; 
 }
 a {
  color:#333;
  text-decoration:none;
  display:block;
 }
 a:hover {
  color:#888;
  text-decoration:none;
 }
 #moving_tab {
  overflow:hidden;
  width:300px;
  position:relative
  border:1px solid #ccc; 
  margin:0 auto;
 }
  #moving_tab .tabs {
   position:relative; 
   height:30px;
   padding-top:5px;
   cursor:default;
  }
  #moving_tab .tabs .item {
   position:relative;
   z-index:10;
   float:left;
   display:block;
   width:150px;
   text-align:center;
   font-size:14px;
   font-weight:700; 
  }
  #moving_tab .tabs .lava {
   position:absolute;
   top:0; left:0;
   z-index:0;  
   width:150px;
   height:30px;
   background:#abe3eb;
  }
  #moving_tab .content {
   position:relative;
   overflow:hidden;
   background:#abe3eb;
   border-top:1px solid #d9fafa;
  }
  #moving_tab .panel {
   position:relative;
   width:600px;
  }
  #moving_tab .panel ul {
   float:left;
   width:300px;
   padding:0;
   margin:0;
   list-style:none;
  }
   #moving_tab .panel ul li {
    padding:5px 0 5px 10px; 
    border-bottom:1px dotted #fff;
   }
 </style>
 <script>
 $(document).ready(function () {
  $('.lava').css({left:$('span.item:first').position()['left']});
  $('.item').mouseover(function () {
   $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});  
   $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
  });
 });
 </script>
</head>
<body>
<div id="moving_tab">
 <div class="tabs">
  <div class="lava"></div>
  <span class="item">Popular Posts</span>
  <span class="item">Recent Posts</span>
 </div>
 <div class="content">      
  <div class="panel">      
   <ul>
    <li><a href='#'>Panel 01 Item 01</a></li>
    <li><a href='#'>Panel 01 Item 02</a></li>
    <li><a href='#'>Panel 01 Item 03</a></li>
    <li><a href='#'>Panel 01 Item 04</a></li>
    <li><a href='#'>Panel 01 Item 05</a></li>
   </ul>
   <ul>
    <li><a href='#'>Panel 02 Item 01</a></li>
    <li><a href='#'>Panel 02 Item 02</a></li>
    <li><a href='#'>Panel 02 Item 03</a></li>
    <li><a href='#'>Panel 02 Item 04</a></li>
    <li><a href='#'>Panel 02 Item 05</a></li>   
   </ul>      
  </div>
 </div> 
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery implementiert ein seitliches Navigationsmenü im Ballon-Popup-Box-Stil effect_jqueryNächster Artikel：jQuery implementiert ein seitliches Navigationsmenü im Ballon-Popup-Box-Stil effect_jquery

In Verbindung stehende Artikel

Mehr sehen