文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

jquery实现楼层滚动特效

2024-04-02 19:55

关注

本文实例为大家分享了jquery实现楼层滚动的具体代码,供大家参考,具体内容如下

效果图

html

<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>
    </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>

css

<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;
      cursor: default;
    }

    #floorNav li:last-child {
      border-bottom: none;

    }

    #header,
    #footer {
      width: 1000px;
      height: 1000px;
      background: darkgoldenrod;
      margin: 0 auto;
    }

    #content li {
      width: 1000px;
      height: 600px;
      margin: 0 auto;
      font-size: 40px;
      text-align: center;
      line-height: 600px;
    }
</style>

js

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function () {
      var flag = true;
      $(window).scroll(function () {
        if (flag) {
          var t = $(this).scrollTop();
          if (t > 500) {
            $("#floorNav").fadeIn();
          } else {
            $("#floorNav").fadeOut();
          }
          $("#content li").each(function () {
            if (t >= $(this).offset().top - $(this).outerHeight() / 2) {
              var index = $(this).index();
              $("#floorNav li")
                .eq(index)
                .addClass("hover")
                .siblings()
                .removeClass("hover");
            }
          });
        }
      });

      $("#floorNav li").click(function () {
        flag = false;
        var index = $(this).index();
        $("html,body").animate(
          {
            scrollTop: $("#content li").eq(index).offset().top,
          },
          () => {
            flag = true;
          }
        );
        $(this).addClass("hover").siblings().removeClass("hover");
      });
    });
</script>

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯