<!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. echarts 给formatter文字添加不同颜色

    legend: { x : 'center', y : 'bottom', icon: "circle", itemWidth: 8, // 设置宽度 itemHeight: 8, ...

  2. 域名访问和ip访问区别

    域名访问和ip访问区别 ip访问对应某一台确定的服务器: 域名访问相当于在ip访问的基础上,做了一个反向代理的中间功能.例如:百度,很多人会同时使用,如果使用的是同一台服务器的话,服务器估计会扛不住, ...

  3. svnadmin - Subversion 仓库管理工具

    SYNOPSIS 总览 svnadmin command /path/to/repos [options] [args] OVERVIEW 概述 Subversion 是一个版本控制系统,允许保存旧版 ...

  4. LayUI最近遇到的问题以及处理

    layui是我最近才接触的..也是新项目中用到的后台前端框架..与easyui有些类似..在这段时间的使用中,经常会碰到大大小小的问题.. 1.选显卡切换又是加载数据表格.分页条不显示 2.layui ...

  5. vue v-modle修饰符.number .trim

    语法糖: 在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发. .number:可以将输入转换成Number类型,否则虽然输入的是数字,但它的类型其实是String. .trim:自动 ...

  6. Faster-RCNN论文精读

    State-of-the-art object detection networks depend on region proposal algorithms to hypothesize objec ...

  7. 深入理解Magento－第九章－修改、扩展、重写Magento代码

    (博主提示:本章应该不是原作者的第九章,仅作补充和参考) 作为一个开发者的你,肯定要修改Magento代码去适应你的业务需求,但是在很多时候我们不希望修改Magento的核心代码,这里有很多原因,例如 ...

  8. Flex布局（一）

    Flex Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局.display: flex;, 行内元 ...

  9. 树形dp+贪心+增量法+排序——cf1241E(好题)

    /* 给定一棵树,每个结点最多选和其相连的k条边,问使边权和最大的策略 dp[u][0|1]用来表示u没连父边|连了父边 时u子树下的最优解 如果u不和任意一个儿子连边,那么u下的收益是tot=sum ...

  10. spark的任务调度模式

    spark任务调度和资源分配 1.Spark调度模式 FIFO和FAIR Spark中的调度模式主要有两种:FIFO和FAIR. 默认情况下Spark的调度模式是FIFO(先进先出),谁先提交谁先执行 ...