jquery实现楼层滚动效果-偶像资源网

本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下

html:

<!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> 
  <div id=\"header\"></div> 
  <div class=\"floor\" id=\"f1\"> 
    <p>第一层</p> 
  </div> 
  <div class=\"floor\" id=\"f2\"> 
    <p>第二层</p> 
  </div> 
  <div class=\"floor\" id=\"f3\"> 
    <p>第三层</p> 
  </div> 
  <div 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> 
  </div> 
 
  <script src=\"js/jquery.min.js\"></script> 
  <script src=\"js/floor.js\"></script> 
</body> 
</html>

js:

(()=>{ 
  var $lift=$(\"#lift\"); 
  $(window).scroll(()=>{ 
    var scrollTop=$(\'html,body\').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) 
  }) 
})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

jquery实现楼层滚动效果

请登录后发表评论