suchen

Heim  >  Artikel  >  Web-Frontend  >  Teilen des Quellcodes der Bodennavigation

Teilen des Quellcodes der Bodennavigation

巴扎黑
巴扎黑Original
2017-06-26 14:31:461076Durchsuche

<!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>


Das obige ist der detaillierte Inhalt vonTeilen des Quellcodes der Bodennavigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Einführung in die jQuery-Benutzeroberfläche und FunktionseinführungNächster Artikel：Einführung in die jQuery-Benutzeroberfläche und Funktionseinführung

In Verbindung stehende Artikel

Mehr sehen