楼梯效果

本文链接： https://blog.csdn.net/MingL520/article/details/53408534

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
            *{padding: 0;margin: 0;}
           #menu{
               width:32px;height:360px;
                position:fixed;
                top:200px;
                left:0px;
           }
           #menu ul li{
               width:32px;height:32px;
               list-style-type:none;
               color:#8F8583;
               text-align:center;
               line-height: 32px;
               border-bottom:1px dotted #ddd;
                position:relative;
           }
           #menu ul li span{
                  display:block;width:32px;height:32px;
                  background:#C81623;
                  position:absolute;
                  top:0;left:0;
                  color:#fff;font-size:12px;
                  display: none;
            }
            #menu ul li:hover span{display:block; }
            #menu ul li span.active{
                   color:#C81623;
                   background:#fff;
                   display:block;
            }
       </style>
   </head>
   <body>
       <div id="menu">
           <ul>
               <li>1<span>第一</span></li>
               <li>2<span>第二</span></li>
               <li>3<span>第三</span></li>
               <li>4<span>第四</span></li>
               <li>5<span>第五</span></li>
               <li>6<span>第六</span></li>
               <li>7<span>第七</span></li>
               <li>8<span>第八</span></li>
               <li>9<span>第九</span></li>
               <li>10<span>第十</span></li>
               <li>11<span>第十一</span></li>
           </ul>
       </div>
       <div id="content">
           <div class="simple" id="floor1" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: red;margin: 0 auto;">第一层</div>
           <div class="simple" id="floor2" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: yellow;margin: 0 auto;">第二层</div>
           <div class="simple" id="floor3" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: yellowgreen;margin: 0 auto;">第三层</div>
           <div class="simple" id="floor4" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: deepskyblue;margin: 0 auto;">第四层</div>
           <div class="simple" id="floor5" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: greenyellow;margin: 0 auto;">第五层</div>
           <div class="simple" id="floor6" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: honeydew;margin: 0 auto;">第六层</div>
           <div class="simple" id="floor7" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: lightgoldenrodyellow;margin: 0 auto;">第七层</div>
           <div class="simple" id="floor8" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: mistyrose;margin: 0 auto;">第八层</div>
           <div class="simple" id="floor9" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: royalblue;margin: 0 auto;">第九层</div>
           <div class="simple" id="floor10" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: skyblue;margin: 0 auto;">第十层</div>
           <div class="simple" id="floor11" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: green;margin: 0 auto;">第十一层</div>
       </div>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <script>
           $(function(){
               var $index = 0;
               $("#menu ul li").click(function(){
                   $(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active");
                   Sindex = $(this).index();
                   var $top=$(".simple").eq(Sindex).offset().top;
                   $("body,html").animate({scrollTop:$top},500);
               });

               var nav=$("#menu");
                $(window).scroll(function(){
                   var index = Math.floor($(document).scrollTop()/300);
                   $("#menu ul li span").eq(index).addClass("active").parent().siblings().find("span").removeClass("active");
                });
           })
       </script>
   </body>
</html>

猜你喜欢