jquery实现滑动楼梯效果

Sara/Sarah ·

更新时间:2024-11-14

· 1157 次阅读

本文实例为大家分享了jquery实现滑动楼梯效果的具体代码，供大家参考，具体内容如下

思路：鼠标滚动的时候页面跟随变化，点击模块时候，实现指哪打哪效果

代码的实现

1.html和css代码


<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   body,ul,li{
    padding: 0;
    margin: 0;
   }
   li{
    list-style: none;
   }
   #floorNav{
    display: none;
    position: fixed;
    top: 100px;
    left: 50px;
    width: 32px;
    border: 1px solid #CECECE;
   }
   #floorNav li{
    position: relative;
    width: 32px;
    height: 32px;
    border-bottom: 1px solid #CECECE;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
   }
   #floorNav span{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: red;
    color: white;
   }
   #floorNav li:hover span,#floorNav li.hover span{
    display: block;
   }
   #floorNav li:last-child{
    background: red;
    color: white;
    border-bottom: none;
   }
   #header,#footer{
    width: 1000px;
    height: 1000px;
    background: darkgoldenrod;
    margin: 0 auto;
   }
   #content{
   }
   #content li{
    width:1000px;
    height: 600px;
    margin: 0 auto;
    font-size: 40px;
    text-align: center;
    line-height: 600px;
   }
  </style>
 </head>
 <body>
  <div id="floorNav">
   <ul>
    <li>1F<span>服饰</span></li>
    <li>2F<span>美妆</span></li>
    <li>3F<span>手机</span></li>
    <li>4F<span>家电</span></li>
    <li>5F<span>数码</span></li>
    <li>6F<span>运动</span></li>
    <li>7F<span>居家</span></li>
    <li>8F<span>母婴</span></li>
    <li>9F<span>食品</span></li>
    <li>10F<span>图书</span></li>
    <li>11F<span>服务</span></li>
    <li>TOP</li>
   </ul>
  </div>
  <div id="header"></div>
  <div id="content">
   <ul>
    <li style="background: #8B0000;">服饰</li>
    <li style="background: #123;">美妆</li>
    <li style="background: #667;">手机</li>
    <li style="background: #558;">家电</li>
    <li style="background: #900;">数码</li>
    <li style="background: #456;">运动</li>
    <li style="background: #789;">居家</li>
    <li style="background: #234;">母婴</li>
    <li style="background: #567;">食品</li>
    <li style="background: #887;">图书</li>
    <li style="background: #980;">服务</li>
   </ul>
 </div>
 <div id="footer"></div>
</body>

2.接下来进行引入一个 jQuery 文件然后进行jQuery代码的编写


<script>
    $(function(){
 //定义判别
 var flag = true
  $(window).scroll(function(){
   if(flag){
   //显示隐藏的楼梯
   var scrollTop=$(this).scrollTop();
   if(scrollTop>=500){
    $("#floorNav").fadeIn()
   } else{
    $("#floorNav").fadeOut();
   }
   //指哪打哪
   $("#content li").each(function(){
    if(scrollTop>=$(this).offset().top-$(this).outerHeight()/2){
     var index = $(this).index();
     $("#floorNav li").eq(index).addClass("hover")
     .siblings().removeClass("hover")
    }
   })
   }
  })
  //点击的时候滚动条滚动到相应的位置
  $("#floorNav li:not(:last)").click(function(){
   flag=false
   var index = $(this).index();
   $("html ,body").animate({"scrollTop":$("#content li").eq(index).offset().top},500)
   flag=true
   $(this).addClass("hover").siblings().removeClass("hover")
  })
   $("#floorNav li:last").click(function(){
    flag = false;
    $("html,body").animate({"scrollTop":0},200,function(){
     flag = true
    })
   })
 })
</script>

楼梯 jQuery

1024 个赞