<!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. Hooks初探

    一.创建自己的HOOkS,并进行封装 二.创建自己的HOOkS,并进行封装

  2. sql语句练习50题(Mysql版-详加注释)

    表名和字段 1.学生表       Student(s_id,s_name,s_birth,s_sex) --学生编号,学生姓名, 出生年月,学生性别 2.课程表       Course(c_id, ...

  3. 一些笔记jexcel

    根据坐标或者指定列标题 jexcel.getColumnNameFromId([ x, y ]);

  4. Dubbox服务的消费方配置

    在src/main/resources下创建applicationContext-web.xml <?xml version="1.0" encoding="UTF ...

  5. Vue 一些零零散散~

    1. F5刷新不会触发vue的destroyed事件. 2. computed 的 vuex 数据 ------>   beforeCreated: undefined   /    creat ...

  6. string::size_type 页73 size_t 页90

    异同点: size_t size_type sizeof(XXX)所得到的结果的类型就是 string类类型和vector类类型定义的类型,string的size操作返回来的是string::size ...

  7. 一键对centos7.6安装python3环境已经pip3

    1 yum -y install "Development tools" 2 yum -y install zlib-devel bzip2-devel openssl-devel ...

  8. Sublime Text添加gcc编译器

    { "shell_cmd" : "gcc $file_name -o ${file_base_name}", "working_dir" : ...

  9. leetcode-第14周双周赛-1271-十六进制魔术数字

    自己的提交: class Solution: def toHexspeak(self, num: str) -> str: num = hex(int(num)) num = str(num)[ ...

  10. 思维+multiset优化——cf1249E

    正着想很难,但是反着想就容易有思路 /* 将问题转化为 挑选最多的线段,每个点的覆盖次数不超过k次 multiset里存k个右端点,表示第i层当前的最远右端点,每次来一根新线段,能填就填进并更新,不能 ...