源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 3700|回复: 0

[JavaScript] jquery实现滑动楼梯效果的实例代码

[复制链接]

3123

主题

3525

帖子

14万

金币

超级版主

Rank: 8Rank: 8

积分
287186
发表于 2023-4-14 09:57:53 | 显示全部楼层 |阅读模式



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

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

代码的实现

1.html和css代码

  1. <html>
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <title></title>
  5.   <style type="text/css">
  6.    body,ul,li{
  7.     padding: 0;
  8.     margin: 0;
  9.    }
  10.    li{
  11.     list-style: none;
  12.    }
  13.    #floorNav{
  14.     display: none;
  15.     position: fixed;
  16.     top: 100px;
  17.     left: 50px;
  18.     width: 32px;
  19.     border: 1px solid #CECECE;
  20.    }
  21.    #floorNav li{
  22.     position: relative;
  23.     width: 32px;
  24.     height: 32px;
  25.     border-bottom: 1px solid #CECECE;
  26.     text-align: center;
  27.     line-height: 32px;
  28.     font-size: 12px;
  29.    }
  30.    
  31.    #floorNav span{
  32.     display: none;
  33.     position: absolute;
  34.     top: 0;
  35.     left: 0;
  36.     width: 32px;
  37.     height: 32px;
  38.     background: red;
  39.     color: white;
  40.    }
  41.    
  42.    #floorNav li:hover span,#floorNav li.hover span{
  43.     display: block;
  44.    }
  45.    
  46.    #floorNav li:last-child{
  47.     background: red;
  48.     color: white;
  49.     border-bottom: none;
  50.    }
  51.    #header,#footer{
  52.     width: 1000px;
  53.     height: 1000px;
  54.     background: darkgoldenrod;
  55.     margin: 0 auto;
  56.    }
  57.    #content{
  58.      
  59.    }
  60.    #content li{
  61.     width:1000px;
  62.     height: 600px;
  63.     margin: 0 auto;
  64.     font-size: 40px;
  65.     text-align: center;
  66.     line-height: 600px;
  67.    }
  68.   </style>
  69. </head>

  70. <body>
  71.   <div id="floorNav">
  72.    <ul>
  73.     <li>1F<span>服饰</span></li>
  74.     <li>2F<span>美妆</span></li>
  75.     <li>3F<span>手机</span></li>
  76.     <li>4F<span>家电</span></li>
  77.     <li>5F<span>数码</span></li>
  78.     <li>6F<span>运动</span></li>
  79.     <li>7F<span>居家</span></li>
  80.     <li>8F<span>母婴</span></li>
  81.     <li>9F<span>食品</span></li>
  82.     <li>10F<span>图书</span></li>
  83.     <li>11F<span>服务</span></li>
  84.     <li>TOP</li>
  85.    </ul>
  86.   </div>
  87.   <div id="header"></div>
  88.   <div id="content">
  89.    <ul>
  90.     <li style="background: #8B0000;">服饰</li>
  91.     <li style="background: #123;">美妆</li>
  92.     <li style="background: #667;">手机</li>
  93.     <li style="background: #558;">家电</li>
  94.     <li style="background: #900;">数码</li>
  95.     <li style="background: #456;">运动</li>
  96.     <li style="background: #789;">居家</li>
  97.     <li style="background: #234;">母婴</li>
  98.     <li style="background: #567;">食品</li>
  99.     <li style="background: #887;">图书</li>
  100.     <li style="background: #980;">服务</li>
  101.    </ul>
  102. </div>
  103. <div id="footer"></div>
  104. </body></html>
复制代码


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

  1. <script>
  2.     $(function(){

  3. //定义判别
  4. var flag = true
  5.   
  6.   $(window).scroll(function(){

  7.    if(flag){
  8.    //显示隐藏的楼梯
  9.    var scrollTop=$(this).scrollTop();
  10.    if(scrollTop>=500){
  11.     $("#floorNav").fadeIn()
  12.    } else{
  13.     $("#floorNav").fadeOut();
  14.    }

  15.    //指哪打哪
  16.    $("#content li").each(function(){
  17.     if(scrollTop>=$(this).offset().top-$(this).outerHeight()/2){
  18.      var index = $(this).index();
  19.      $("#floorNav li").eq(index).addClass("hover")
  20.      .siblings().removeClass("hover")
  21.     }

  22.    })
  23.    }
  24.   })
  25.   
  26.   //点击的时候滚动条滚动到相应的位置
  27.   $("#floorNav li:not(:last)").click(function(){
  28.    flag=false
  29.    var index = $(this).index();
  30.    $("html ,body").animate({"scrollTop":$("#content li").eq(index).offset().top},500)
  31.    
  32.    flag=true
  33.    $(this).addClass("hover").siblings().removeClass("hover")
  34.   })
  35.   
  36.    $("#floorNav li:last").click(function(){
  37.     flag = false;
  38.     $("html,body").animate({"scrollTop":0},200,function(){
  39.      flag = true
  40.     })
  41.    })
  42. })

  43. </script>
复制代码


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持锦尚中国。

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-12-12 03:14 , Processed in 0.111369 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明