<!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. PHP 工厂模式浅析

    //抽象出一个人的接口interface Person{ public function showInfo();}//继承于人的学生类class Student implements Person{ ...

  2. Docker部署web环境之Lanmt

    2. 案例二 整套项目多容器分离通过docker-compose部署lanmt环境 详细的安装准备环境,省略,配置以及部署参考案例一即可 即可实现批量创建web,也可以实现多web共用一个php或my ...

  3. 深入理解java虚拟机JVM（下）

    深入理解java虚拟机JVM(下) 链接:https://pan.baidu.com/s/1c6pZjLeMQqc9t-OXvUM66w 提取码:uwak 复制这段内容后打开百度网盘手机App,操作更 ...

  4. CSV模块的使用

    1.csv简介 CSV (Comma Separated Values),即逗号分隔值(也称字符分隔值,因为分隔符可以不是逗号),是一种常用的文本 格式,用以存储表格数据,包括数字或者字符.很多程序在 ...

  5. 【Luogu】【关卡2-3】排序（2017年10月） 【AK】

    任务说明:将杂乱无章的数据变得有规律.有各种各样的排序算法,看情况使用. 这里有空还是把各种排序算法总结下吧.qsort需要会写.. P1177 [模板]快速排序 这个题目懒得写了,直接sort了.. ...

  6. express 使用art-template模板引擎

    下载express-art-template art-template - app.js中配置 - 注册一个模板引擎 - `app.engine('.html',express-art-templat ...

  7. bzoj 2631

    lct 基础(' '   ) 就当个纪念吧(' '    )  毕竟写了4h, cut 部分一直naive 总是想找谁是儿子,然后最后发现直接提根就好了啊(' '   ) #include <i ...

  8. C++11下的关键字

    STL类:stack,queue,deque,priority_queue,map,set,multiset,bitset,vector 函数类:min,max,swap,sqrt,log,rever ...

  9. 使用pangolin库画出轨迹

    https://github.com/stevenlovegrove/Pangolin cmake_minimum_required(VERSION 2.8) project(chapter3) ) ...

  10. NX二次开发-BlockUI对话框嵌套MFC对话框制作进度条

    半年前在一些QQ群看到有大神NX二次开发做出了进度条,那个时候我还不会弄,也不知道怎么弄得,后来断断续续得研究了一下,直到今天我把它做出来了.内心还是很喜悦的!回想自己这两年当初从没公司肯给我做NX二 ...