首页 > 文章 > web前端 > 楼层导航源码分享

楼层导航源码分享

巴扎黑原创: 2017-06-26 14:31:461074浏览

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

以上是楼层导航源码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jQuery UI的简介和特性介绍下一篇：前端基于JQgrid实现自定义列头展示

查看更多