So erzielen Sie mit jquery einen Floor-Scrolling-Effekt-js-Tutorial-php.cn

So erzielen Sie mit jquery einen Floor-Scrolling-Effekt

亚连

Freigeben： 2018-06-14 15:03:08

Original

1568 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich JQuery vor, um den Floor-Scrolling-Effekt im Detail zu realisieren. Er hat einen gewissen Referenzwert.

Das Beispiel dieses Artikels teilt mit Ihnen die JQuery, um den Floor-Scrolling-Effekt zu realisieren Der angezeigte spezifische Code dient als Referenz. Der spezifische Inhalt lautet wie folgt:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="css/base.css" rel="external nofollow" > 
  <style> 
    #header,#f1,#f2,#f3{ 
      width: 80%; 
      height: 500px; 
      background: yellow; 
      margin-left: 10%; 
      margin-top: 50px; 
    } 
    #f1{ 
      background: green; 
    } 
    #f2{ 
      background: red; 
    } 
    #f3{ 
      background: blue; 
    } 
    #lift{ 
      position: fixed; 
      top: 280px; 
      display: none; 
    } 
    .lift_btn{ 
      display: inline-block; 
      width: 50px; 
      height: 50px; 
      border: 1px solid #000; 
    } 
    .hover{ 
      background: red; 
    } 
  </style> 
</head> 
<body> 
  <p id="header"></p> 
  <p class="floor" id="f1"> 
    <p>第一层</p> 
  </p> 
  <p class="floor" id="f2"> 
    <p>第二层</p> 
  </p> 
  <p class="floor" id="f3"> 
    <p>第三层</p> 
  </p> 
  <p id="lift"> 
    <ul> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>1</span> 
        </a> 
      </li> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>2</span> 
        </a> 
      </li> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>3</span> 
        </a> 
      </li> 
    </ul> 
  </p> 
 
  <script src="js/jquery.min.js"></script> 
  <script src="js/floor.js"></script> 
</body> 
</html>

Nach dem Login kopieren

js:

(()=>{ 
  var $lift=$("#lift"); 
  $(window).scroll(()=>{ 
    var scrollTop=$(&#39;html,body&#39;).scrollTop(); 
    var $f1=$("#f1"); 
    var offsetTop=$f1.offset().top; 
    if(offsetTop<scrollTop+innerHeight/2) 
      $lift.fadeIn(500); 
    else 
      $lift.fadeOut(500); 
    var $floors=$(".floor"); 
    $floors.each((i,elem)=>{ 
      var $f=$(elem); 
      if($f.offset().top<scrollTop+innerHeight/2) 
        $lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover"); 
    }); 
  }); 
 
  $lift.children("ul").on("click","li",function(){ 
    var $li=$(this); 
    var i=$li.index(); 
    var $fi=$(".floor:eq("+i+")"); 
    var offsetTop=$fi.offset().top; 
    $("html").animate({ 
      scrollTop:offsetTop-60 
    },500) 
  }) 
})();

Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, dass es Ihnen in Zukunft nützlich sein wird.

Verwandte Artikel:

So implementieren Sie JS-Klassen mithilfe der tangram.js-Bibliothek

So implementieren Sie parasitäre kombinierte Vererbung mithilfe von JavaScript

So implementieren Sie das verzögerte Laden von Bildern, die nicht auf dem ersten Bildschirm angezeigt werden, in JS

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit jquery einen Floor-Scrolling-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!