<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             * {margin: 0; padding: 0; border: none;}

             ul,li {list-style: none;}

             #loutiNav {

                 position: fixed;

                 left: 40px;

                 top: 25%;

                 width: 30px;

                 border: 1px solid black;

                 background:pink;

             }

             #loutiNav li {

                 width: 30px;

                 height: 29px;

                 border-bottom: 1px dashed white;

                 font-size: 14px;

                 text-align: center;

                 line-height: 29px;

                 position: relative;

                 cursor: pointer;

             }

             #loutiNav li span {

                 display: none;

                 position: absolute;

                 left: 0;

                 top: 0;

                 width: 30px;

                 height: 29px;

                 background: white;

             }

             #loutiNav li:hover span{

                 display: block;

                 background: darkred;

                 color:  white;

             }

             #loutiNav li span.active {

                 display: block;

                 background: white;

                 color: darkred;

             }

             #head, #main div, #foot {

                 width: 1000px;

                 height: 600px;

                 font-size: 100px;

                 text-align: center;

                 line-height: 600px;

                 margin: 0 auto;

             }

         </style>

         <script src="js/jquery-1.12.3.js"></script>

         <script>

             $(function(){

                 var isMoving = false; //是否点击了按钮页面正在动画移动

                 $("#loutiNav li").click(function(){

                     //改变按钮的选中状态

                     $(this).find("span").addClass("active")

                     .parent().siblings().find("span").removeClass("active");

                     //移动页面到对应的楼层

                     var index = $(this).index();

                     var _top = $(".louti").eq(index).offset().top;

                     //$(window).scrollTop(_top);

                     isMoving = true;

                     $("html, body").stop().animate({scrollTop:_top}, 400, function(){

                         isMoving = false;

                     });

                 })

                 //滚动事件

                 $(window).scroll(function(){

                     if ( !isMoving ) {

                         var scrollTop = $(window).scrollTop();

                         //遍历所有楼层

                         var index = 0;

                         $(".louti").each(function(){

                             if ( scrollTop >= $(this).offset().top ){

                                 //console.log( $(this).index() );

                                 index = $(this).index();

                             }

                         })

                         //console.log(index);

                         $("#loutiNav li").eq(index).find("span").addClass("active")

                         .parent().siblings().find("span").removeClass("active");

                     }

                 })

             })

         </script>

     </head>

     <body>

         <div id="loutiNav">

             <ul>

                 <li>1F<span class="active">服饰</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="head" style="background: #008800;">头部</div>

         <div id="main">

             <div class="louti" style="background: #666699;">1F服饰</div>

             <div class="louti" style="background: #66FF99;">2F美妆</div>

             <div class="louti" style="background: #33CC99;">3F手机</div>

             <div class="louti" style="background: #663399;">4F家电</div>

             <div class="louti" style="background: #669966;">5F数码</div>

             <div class="louti" style="background: #99FF99;">6F运动</div>

             <div class="louti" style="background: #33FF99;">7F居家</div>

             <div class="louti" style="background: #66CC99;">8F母婴</div>

             <div class="louti" style="background: #663377;">9F食品</div>

             <div class="louti" style="background: #666666;">10F图书</div>

             <div class="louti" style="background: #9999FF;">11F服务</div>

         </div>

         <div id="foot" style="background: #008800;">尾部</div>

     </body>

 </html>

jq-demo-楼梯效果的更多相关文章

  1. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  2. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  3. jq demo 简单的图片懒加载效果

    重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...

  4. jq demo—图片翻页展示效果 animate()动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 今天讲的是JQ 的动画效果

    老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. js控制页面每次滚动一屏，和楼梯效果

    我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...

  7. 微信小程序-自定义菜单导航（实现楼梯效果）

    设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant U ...

  8. jQ模拟打字效果插件typetype

    typetype是一个jquery插件,可以模拟人类的打字效果. 效果图如下所示: 查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type. ...

  9. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

随机推荐

  1. tex, virtex, initex - 文本格式化和排版

    SYNOPSIS 总览 tex [options] [commands] DESCRIPTION 描述 这份手册页并不全面.此版本的 TeX 完整的文档可以从 info 文件或者手册 Web2C: A ...

  2. ubuntu批量转换所有子文件夹下图片文件格式

    第一步按照 sudo apt-get install imagemagick 对于一个文件,可以: convert ubuntuhandbook.png ubuntuhandbook.jpg 对于多个 ...

  3. linux磁盘空间占用分析

    df -h # 查看目前磁盘空间占用 cd / # 切换到根目录 du -sh # 查询每个目录占用的大小 lsof | grep delete # 查看当前系统打开文件 # 删除不使用的文件, 如果 ...

  4. 转译es6原生原生对象及方法,如Object.assign,Object.keys等，及promise

    下面主要为兼容恶心的ie 1,首先引入‘babel-polyfill’,可写在webpack.dev.js的entry.vendors数组里面 2,在入口文件如app.js里面import 'babe ...

  5. 6374. 【NOIP2019模拟2019.10.04】结界[生与死的境界]

    题目 题目大意 给你一个数列,每次可以选择任意两个相邻的数\(x\)和\(y\),将其删去,并在原来位置插入\(x+2y\). 每次询问一个区间,对这个区间进行上述操作.求最后剩下的数最大是多少. 答 ...

  6. c++ 兰姆达表达式

    #include<iostream> using namespace std;   int main() {     int a = 1;     int b = 2;       aut ...

  7. Delphi 常用API 函数列表

    Delphi 常用API 函数 AdjustWindowRect 给定一种窗口样式,计算获得目标客户区矩形所需的窗口大小AnyPopup 判断屏幕上是否存在任何弹出式窗口ArrangeIconicWi ...

  8. 八年技术加持，性能提升10倍，阿里云HBase 2.0首发商用

    摘要: 早在2010年开始,阿里巴巴集团开始研究并把HBase投入生产环境使用,从最初的淘宝历史交易记录,到蚂蚁安全风控数据存储,HBase在几代阿里专家的不懈努力下,已经表现得运行更稳定.性能更高效 ...

  9. QT之sqlite连接

    啥也没做,按说明直接啪啪写一堆代码 QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); //open datebase ...

  10. Linux下安装PHP的curl扩展

    先安装依赖包: yum install curl curl-devel 找到PHP的安装包,cd 进入安装包 cd php-5.6.25/ext/curl phpize 如果报找不到phpize就补全 ...