jquery實(shí)現(xiàn)滑動(dòng)樓梯效果

更新時(shí)間：2021年09月23日 08:58:53 作者：Zhang_xiao_pang

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)滑動(dòng)樓梯效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)滑動(dòng)樓梯效果的具體代碼，供大家參考，具體內(nèi)容如下

思路：鼠標(biāo)滾動(dòng)的時(shí)候頁面跟隨變化，點(diǎn)擊模塊時(shí)候，實(shí)現(xiàn)指哪打哪效果

代碼的實(shí)現(xiàn)

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>手機(jī)</span></li>
    <li>4F<span>家電</span></li>
    <li>5F<span>數(shù)碼</span></li>
    <li>6F<span>運(yùn)動(dòng)</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>服務(wù)</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;">手機(jī)</li>
    <li style="background: #558;">家電</li>
    <li style="background: #900;">數(shù)碼</li>
    <li style="background: #456;">運(yùn)動(dòng)</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;">服務(wù)</li>
   </ul>
 </div>
 <div id="footer"></div>
</body>

2.接下來進(jìn)行引入一個(gè) jQuery 文件然后進(jìn)行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")
    }

   })
   }
  })
 
  //點(diǎn)擊的時(shí)候滾動(dòng)條滾動(dòng)到相應(yīng)的位置
  $("#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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: