suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für die Verwendung des jQuery-Web-Tab-Plug-ins rTabs: Analysis_jquery

Beispiel für die Verwendung des jQuery-Web-Tab-Plug-ins rTabs: Analysis_jquery

WBOY
WBOYOriginal
2016-05-16 15:42:251557Durchsuche

Das Beispiel in diesem Artikel beschreibt die Verwendung des jQuery-Web-Tab-Plug-ins rTabs. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier stellen wir die Verwendung des jQuery-Web-Tab-Plugins rTabs vor. Der erste: Standardstil: automatisch ausgeführt, kein Animationseffekt, der zweite: automatisch -Ausführen, nach oben scrollen, TAB-Tab-Menü, das Hover-Ereignisse unterstützt; der dritte Typ: Autostart, Ein- und Ausblenden, Tabs, die Hover-Ereignisse unterstützen; der vierte Typ: Autostart, Linksscrollen, Klicken auf Ereignis-Webseiten-Tabs; Wählen Sie das aus, das Ihnen gefällt. Platzieren Sie es auf Ihrer Website.

Schauen wir uns die Screenshots des Laufeffekts an:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-rTabs-web-tab-cha-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery - rTabs选项卡插件</title>
<head>
<script id="jquery_172" type="text/javascript" class="library" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($){
 $.fn.rTabs = function(options){
  //默认值
  var defaultVal = {
  btnClass:'.j-tab-nav', /*按钮的父级Class*/
  conClass:'.j-tab-con', /*内容的父级Class*/
  bind:'hover', /*事件参数 click,hover*/
  animation:'0', /*动画方向 left,up,fadein,0 为无动画*/
  speed:300,  /*动画运动速度*/
  delay:200, /*Tab延迟速度*/
  auto:true, /*是否开启自动运行 true,false*/
  autoSpeed:3000 /*自动运行速度*/
  };
  //全局变量
  var obj = $.extend(defaultVal, options),
  evt = obj.bind,
  btn = $(this).find(obj.btnClass),
  con = $(this).find(obj.conClass),
  anim = obj.animation,
  conWidth = con.width(),
  conHeight = con.height(),
  len = con.children().length,
  sw = len * conWidth,
  sh = len * conHeight,
  i = 0,
  len,t,timer;
  return this.each(function(){
  //判断动画方向
  function judgeAnim(){
   var w = i * conWidth,
   h = i * conHeight;
  btn.children().removeClass('current').eq(i).addClass('current');
   switch(anim){
   case '0':
   con.children().hide().eq(i).show();
   break;
   case 'left':
   con.css({position:'absolute',width:sw}).children().css({float:'left',display:'block'}).end().stop().animate({left:-w},obj.speed);
   break;
   case 'up':
   con.css({position:'absolute',height:sh}).children().css({display:'block'}).end().stop().animate({top:-h},obj.speed);
   break;
   case 'fadein':
   con.children().hide().eq(i).fadeIn();
   break;
   }
  }
  //判断事件类型
  if(evt == "hover"){
   btn.children().hover(function(){
    var j = $(this).index();
    function s(){
    i = j;
    judgeAnim();
    }
    timer=setTimeout(s,obj.delay);
    }, function(){
     clearTimeout(timer);
    })
   }else{
    btn.children().bind(evt,function(){
     i = $(this).index();
     judgeAnim();
    })
   }
   //自动运行
   function startRun(){
    t = setInterval(function(){
     i++;
     if(i>=len){
      switch(anim){
       case 'left':
       con.stop().css({left:conWidth});
       break;
       case 'up':
       con.stop().css({top:conHeight});
      } 
      i=0;
     }
     judgeAnim();
    },obj.autoSpeed)
   }
   //如果自动运行开启，调用自动运行函数
   if(obj.auto){
    $(this).hover(function(){
     clearInterval(t);
    },function(){
     startRun();
    })
    startRun();
   }
  })
 }
})(jQuery);
</script>
<script type="text/javascript">
   $(function() {
    $("#tab").rTabs();
    $("#tab2").rTabs({
     bind : 'click',
     animation : 'left'
    });
    $("#tab3").rTabs({
     bind : 'hover',
     animation : 'up'
    });
    $("#tab4").rTabs({
     bind : 'hover',
     animation : 'fadein'
    });
   })
  </script>
<style>
body{background:#fff;}h2{width: 400px;margin: 0 auto 10px auto;font-size: 18px;font-family: "微软雅黑";color: #333;}.tab{position: relative;width: 400px;height: 230px;overflow: hidden;margin: 0 auto 20px auto;font-family: Arial;}.tab-nav{height: 30px;overflow: hidden;background: #f5f5f5;}.tab-nav a{display: block;float: left;width: 80px;height: 30px;line-height: 30px;text-align: center;text-decoration: none;color: #999;}.tab-nav a.current{background: #80b600;color: #fff;}.tab-con{position: relative;width: 400px;height: 200px;overflow: hidden;background: #80b600;}.tab-con-item{display: none;width: 400px;height: 180px;line-height: 180px;text-align: center;color: #fff;}
</style>
</head>
<body>
<h1>如果初次打开网页运行有错误看不到效果，请按F5或刷新网页重新载入即可。</h1></br>
<h2>默认样式：自动运行、无动画效果、Hover事件</h2>
<div class="tab" id="tab">
 <div class="tab-nav j-tab-nav">
  <a href="javascript:void(0);" class="current">Tab1</a>
  <a href="javascript:void(0);">Tab2</a>
  <a href="javascript:void(0);">Tab3</a>
  <a href="javascript:void(0);">Tab4</a>
  <a href="javascript:void(0);">Tab5</a>
 </div>
 <div class="tab-con">
  <div class="j-tab-con">
   <div class="tab-con-item" style="display:block;">111111</div>
     <div class="tab-con-item">222222</div>
     <div class="tab-con-item">333333</div>
     <div class="tab-con-item">444444</div>
     <div class="tab-con-item">555555</div>
   </div>
  </div>
 </div>
<h2>自动运行、向左滚动、点击事件</h2>
<div class="tab" id="tab2">
 <div class="tab-nav j-tab-nav">
  <a href="javascript:void(0);" class="current">Tab1</a>
  <a href="javascript:void(0);">Tab2</a>
  <a href="javascript:void(0);">Tab3</a>
  <a href="javascript:void(0);">Tab4</a>
  <a href="javascript:void(0);">Tab5</a>
 </div>
<div class="tab-con">
<div class="j-tab-con">
<div class="tab-con-item" style="display:block;">111111</div>
<div class="tab-con-item">222222</div>
<div class="tab-con-item">333333</div>
<div class="tab-con-item">444444</div>
<div class="tab-con-item">555555</div>
</div>
</div>
</div>
<h2>自动运行、向上滚动、Hover事件</h2>
 <div class="tab" id="tab3">
  <div class="tab-nav j-tab-nav">
   <a href="javascript:void(0);" class="current">Tab1</a>
   <a href="javascript:void(0);">Tab2</a>
   <a href="javascript:void(0);">Tab3</a>
   <a href="javascript:void(0);">Tab4</a>
   <a href="javascript:void(0);">Tab5</a>
  </div>
 <div class="tab-con">
  <div class="j-tab-con">
   <div class="tab-con-item" style="display:block;">111111</div>
   <div class="tab-con-item">222222</div>
   <div class="tab-con-item">333333</div>
   <div class="tab-con-item">444444</div>
   <div class="tab-con-item">555555</div>
   </div>
 </div>
</div>
<h2>自动运行、渐入、Hover事件</h2>
  <div class="tab" id="tab4">
   <div class="tab-nav j-tab-nav">
    <a href="javascript:void(0);" class="current">Tab1</a>
    <a href="javascript:void(0);">Tab2</a>
    <a href="javascript:void(0);">Tab3</a>
    <a href="javascript:void(0);">Tab4</a>
    <a href="javascript:void(0);">Tab5</a>
   </div>
   <div class="tab-con">
    <div class="j-tab-con">
    <div class="tab-con-item" style="display:block;">111111</div>
    <div class="tab-con-item">222222</div>
    <div class="tab-con-item">333333</div>
    <div class="tab-con-item">444444</div>
    <div class="tab-con-item">555555</div>
   </div>
  </div>
 </div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller 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-Dropdown-freundlicher Link-Verschönerungseffektcodesharing_jqueryNächster Artikel：jQuery-Dropdown-freundlicher Link-Verschönerungseffektcodesharing_jquery

In Verbindung stehende Artikel

Mehr sehen