jquery écrit la commutation de navigation par défilement d'onglets effets spéciaux

jquery écrit la commutation de navigation par défilement d'onglets effets spéciaux_jquery

WBOY

Libérer： 2016-05-16 15:06:18

original

2158 Les gens l'ont consulté

L'exemple dans cet article est de partager avec vous les effets de changement d'onglet écrits en jquery pour votre référence. Le contenu spécifique est le suivant

Description de l'effet : Cliquez sur l'onglet de navigation et la page glissera vers la section correspondante ci-dessous. Et lorsque la page défile vers le bas avec la souris, l'onglet ci-dessus peut également basculer automatiquement vers la section à l'emplacement actuel.

Description du code : Écrivez deux actions séparément dans js, l'une consiste à cliquer sur l'onglet et à glisser vers le bas jusqu'à la position de section correspondante ; l'autre consiste à déterminer la hauteur de défilement de la page actuelle et à changer d'onglet lorsque la souris défile vers le bas.
js :

$(document).ready(function(){  
  $('.switch-tab>li').click(function(){
    var s=$('.switch-tab>li').index(this);
    $('body,html').animate({scrollTop:$('.tab-content>.tab-panel:eq('+s+')').offset().top-50},200);
  });

  var DT=$('.switch-tab').offset().top;
  $(window).scroll(function(){
    var wt=$(window).scrollTop(),l=$('.tab-content>.tab-panel'),s=l.length-1;
    if(wt<DT||wt>=l.last().offset().top+l.last().height()+50){
      $('.switch-tab').removeClass('fixed');
      $('.switch-tab>li:first').addClass('active').siblings().removeClass('active');
    }else{
      $('.switch-tab').addClass('fixed');
      for(var i=0;i<s;i++){
        if(wt>=parseInt(l.eq(i).offset().top-50)&&wt<parseInt(l.eq(i+1).offset().top-50)){
          s=i;
          break;
        }
      }
      $('.switch-tab>li:eq('+s+')').addClass('active').siblings().removeClass('active');
    }
  });
});

Copier après la connexion

html :

<div class="switch-nav">
  <ul class="switch-tab">
    <li><a href="javascript:; ">拉托红酒</a></li>
    <li><a href="javascript:; ">法国酒庄风情</a></li>
    <li><a href="javascript:; ">红酒包装</a></li>
    <li><a href="javascript:; ">个性定制</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-panel" id="cpxq">
    1111
  </div>
  <div class="tab-panel" id="cpxq">
    222
  </div>
  <div class="tab-panel" id="cpxq">
    333
  </div>
  <div class="tab-panel" id="cpxq">
    444
  </div>
</div>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.