Home > Web Front-end > JS Tutorial > body text

Floor navigation source code sharing

巴扎黑
Release: 2017-06-26 14:31:46
Original
1059 people have browsed it

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>楼层导航-smallswallows</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js?1.1.11"></script>
   <style type="text/css">
   *{
       margin:0;
       padding:0;
   }
       .div div{
           width: 300px;
           height: 800px;
           border: 1px solid red;
       }
       ul li{
           list-style-type: none;
       }
       .floor{
           position: fixed;
           top: 20px;
           right: 20px;
           border: 1px solid red;
           display: none;
       }
       .loading{
           background: skyblue;
       }
       .red{
           background: red;
       }
       li,.top{
           cursor: pointer;
}
       li:hover{
           background: skyblue;
       }
   </style>
</head>
<body>
   <div style="height: 50px;background: red">楼层展示</div>
   <div>
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
       <div>7</div>
       <div>8</div>
   </div>
   <div> 
       <ul>
           <li>第1张</li>
           <li>第2张</li>
           <li>第3张</li>
           <li>第4张</li>
           <li>第5张</li>
           <li>第6张</li>
           <li>第7张</li>
           <li>第8张</li>
       </ul>
       <p>返回顶部</p>
   </div>
</body>
<script>
   window.onload = window.onscroll = function(){
       var top = 50; //控制离顶部的距离
       var length = $(".div div").length;
       var liLength=$("li").length;
//添加加载动画 each
       $(".div div").each(function(){
          $(this).addClass("loading");
       })
console.log($(".div div")[0].offsetTop)
       if($(window).scrollTop() >$(".div div")[0].offsetTop-top ){
           $(".floor").css("display","block")
       }else{
           $(".floor").css("display","none")
}
// 楼层添加颜色,通过:eq()方法来实现
       var num = 0;
       for(var i = 0;i<length;i++){
          if($(window).scrollTop() >=$(".div div")[i].offsetTop- top){
               num = i;
           }
           $(".floor li:eq("+i+")").css("background","")
       }
           $(".floor li:eq("+num+")").css("background","red")
// 楼层点击事件 点击楼层跳转
       for(var i = 0;i<liLength;i++){
           $(".floor li:eq("+i+")").click(function(){
               for(var j=0;j<liLength;j++){
                   if($(this).html() == $(".floor li:eq("+j+")").html()){
                        $(&#39;body,html&#39;).stop().animate({
                            scrollTop: ($(".div div")[j].offsetTop)
                        }, 500);
                        return false;
                   }
               }
           })
       }
   }
    $(".top").click(function() {
        $(&#39;body,html&#39;).animate({
            scrollTop: 0
        }, 500);
        return false;
    });
</script>
</html>
Copy after login


The above is the detailed content of Floor navigation source code sharing. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!