<!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. 人生苦短，我学PYTHON

    人生苦短我学PYTHON 坚持 努力

  2. java 中String类的常用方法总结，玩转String类

    String类: String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.String类对象创建后不能修改,StringBuffer & St ...

  3. maven spring-mvc mybatis整合

    一 首先在myeclipse中安装好maven插件. 1.下载地址:http://mirror.bit.edu.cn/apache/maven/maven-3/3.0.5/binaries/apach ...

  4. OpenGL学习——绘制矩形

    接下来稍微扩展一步,绘制矩形,即两个拼在一起的三角形. 引入一个概念, EBO Element Buffer Object  元素缓冲对象, EBO用于存放描述“顶点绘制顺序”的对象. 外注:创建VS ...

  5. teb-安装

    源码:https://github.com/rst-tu-dortmund/teb_local_planner.git 以husky为例子: 1.在gazebo里面配置好机器人底盘的环境 roslau ...

  6. WPF 从服务器下载文件

    1.先获取服务器下载地址,给出要下载到的目标地址 public void DownloadFileFromServer() { string serverFilePath = "http:/ ...

  7. codeforces 1198E Rectangle Painting 2 最小点覆盖

    题目传送门 题意: 有一个$n∗n$的网格,网格中有一些矩形是黑的,其他点都是白的. 你每次可以花费$ min (h,w)$的代价把一个$h*w$的矩形区域变白.求把所有黑格变白的最小代价. 思路: ...

  8. Android 如何使edittext默认失去焦点

    1.在布局文件中给edittext的父控件增加两个属性 android:focusable="true" android:focusableInTouchMode="tr ...

  9. 【LeetCode 3】无重复字符的最长子串

    描述 [题解] 尺取法 对于[l..r]这段 如果新加进来的s[r]有和之前的重复. 那么就不用重新开始了. 直接递增左区间. 让这段没有重复数字了再说. *****然后再把s[r]加进去. [代码] ...

  10. 基础(一)：SCSI硬盘与IDE硬盘有什么区别

    硬盘接口是硬盘与主机系统间的连接部件,作用是在硬盘缓存和主机内存之间传输数据.不同的硬盘接口决定着硬盘与计算机之间的连接速度,在整个系统中,硬盘接口的优劣直接影响着程序运行快慢和系统性能好坏.从整体的 ...