jq-demo-楼梯效果 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             * {margin: 0; padding: 0; border: none;}
  8             ul,li {list-style: none;}
  9             
 10             
 11             #loutiNav {
 12                 position: fixed;
 13                 left: 40px;
 14                 top: 25%;
 15                 width: 30px;
 16                 border: 1px solid black;
 17                 background:pink;
 18             }
 19             #loutiNav li {
 20                 width: 30px;
 21                 height: 29px;
 22                 border-bottom: 1px dashed white;
 23                 font-size: 14px; 
 24                 text-align: center;
 25                 line-height: 29px;
 26                 position: relative;
 27                 cursor: pointer;
 28             }
 29             #loutiNav li span {
 30                 display: none;
 31                 position: absolute;
 32                 left: 0;
 33                 top: 0;
 34                 width: 30px;
 35                 height: 29px;
 36                 background: white;
 37             }
 38             #loutiNav li:hover span{
 39                 display: block;
 40                 background: darkred;
 41                 color:  white;
 42             }
 43             #loutiNav li span.active {
 44                 display: block;
 45                 background: white;
 46                 color: darkred;
 47             }
 48             
 49             #head, #main div, #foot {
 50                 width: 1000px;
 51                 height: 600px;
 52                 font-size: 100px;
 53                 text-align: center;
 54                 line-height: 600px;
 55                 margin: 0 auto;
 56             }
 57             
 58         </style>
 59         <script src="js/jquery-1.12.3.js"></script>
 60         <script>
 61             $(function(){
 62                 
 63                 var isMoving = false; //是否点击了按钮页面正在动画移动
 64                 
 65                 $("#loutiNav li").click(function(){
 66                     
 67                     //改变按钮的选中状态
 68                     $(this).find("span").addClass("active")
 69                     .parent().siblings().find("span").removeClass("active");
 70                     
 71                     //移动页面到对应的楼层
 72                     var index = $(this).index();
 73                     var _top = $(".louti").eq(index).offset().top;
 74                     
 75                     //$(window).scrollTop(_top);
 76                     isMoving = true;
 77                     $("html, body").stop().animate({scrollTop:_top}, 400, function(){
 78                         isMoving = false;
 79                     });
 80                 })
 81                 
 82                 //滚动事件
 83                 $(window).scroll(function(){
 84                     
 85                     if ( !isMoving ) {
 86                         var scrollTop = $(window).scrollTop();
 87                         
 88                         //遍历所有楼层
 89                         var index = 0;
 90                         $(".louti").each(function(){
 91                             if ( scrollTop >= $(this).offset().top ){
 92                                 //console.log( $(this).index() );
 93                                 index = $(this).index();
 94                             }
 95                         })
 96                         //console.log(index);
 97                         
 98                         $("#loutiNav li").eq(index).find("span").addClass("active")
 99                         .parent().siblings().find("span").removeClass("active");
100                     }
101                 })
102                 
103                 
104             })
105         </script>
106     </head>
107     <body>
108         <div id="loutiNav">
109             <ul>
110                 <li>1F<span class="active">服饰</span></li>
111                 <li>2F<span>美妆</span></li>
112                 <li>3F<span>手机</span></li>
113                 <li>4F<span>家电</span></li>
114                 <li>5F<span>数码</span></li>
115                 <li>6F<span>运动</span></li>
116                 <li>7F<span>居家</span></li>
117                 <li>8F<span>母婴</span></li>
118                 <li>9F<span>食品</span></li>
119                 <li>10F<span>图书</span></li>
120                 <li>11F<span>服务</span></li>
121             </ul>
122         </div>
123         
124         <div id="head" style="background: #008800;">头部</div>
125         <div id="main">
126             <div class="louti" style="background: #666699;">1F服饰</div>
127             <div class="louti" style="background: #66FF99;">2F美妆</div>
128             <div class="louti" style="background: #33CC99;">3F手机</div>
129             <div class="louti" style="background: #663399;">4F家电</div>
130             <div class="louti" style="background: #669966;">5F数码</div>
131             <div class="louti" style="background: #99FF99;">6F运动</div>
132             <div class="louti" style="background: #33FF99;">7F居家</div>
133             <div class="louti" style="background: #66CC99;">8F母婴</div>
134             <div class="louti" style="background: #663377;">9F食品</div>
135             <div class="louti" style="background: #666666;">10F图书</div>
136             <div class="louti" style="background: #9999FF;">11F服务</div>
137         </div>
138         <div id="foot" style="background: #008800;">尾部</div>
139         
140     </body>
141 </html>

 

posted @ 2017-09-12 10:07  铜镜123  阅读(869)  评论(0)    收藏  举报