<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin: 0;padding: 0;}

        html,body{width: 100%;height: 100%;}

        ul,ol{list-style: none;}

        ul{width: 100%;height: 100%;}

        ul li{width: 100%;height: 100%;}

        ol{position: fixed;top: 100px;left: 100px;}

        ol li{

            width: 50px;

            height: 50px;

            border: 1px solid #000;

            margin-top: -1px;

            text-align: center;

            font: 400 22px/50px "simsun";

            cursor: pointer;

        }

    </style>

</head>

<body>

    <ul id="ul">

        <li>男装区</li>

        <li>女装区</li>

        <li>童装区</li>

        <li>孕装区</li>

        <li>老年装区</li>

    </ul>

    <ol id="ol">

        <li>男装</li>

        <li>女装</li>

        <li>童装</li>

        <li>孕装</li>

        <li>老年</li>

    </ol>

</body>

</html>

<script>

    //需求：给所有盒子添加颜色，点击ol的li，页面跳转到ul中相应的li

    //步骤：

    //1、利用数组给所有盒子添加颜色

    //2、缓动框架移动最顶端

    //3、移动到指定位置（给ol中的li绑定索引值，获取对应的ul中的li距离顶端的距离，赋值给target，好让页面跳转

    //4、屏幕滑动，记录屏幕的位置

    var ul = document.getElementById("ul");

    var ol = document.getElementById("ol");

    var ulLis = ul.children;

    var olLis = ol.children;

    var arr = ["pink","yellow","green","purple","orange"];

    var timer = null,target = 0,leader = 0;

    window.onscroll = function () {

        //屏幕滑动，给屏幕目前所在的位置赋值。

        leader = scroll().top;

    }

    for(var i=0;i<olLis.length;i++){

        //为每一个盒子上色，ul和ol中的li对应颜色

        ulLis[i].style.backgroundColor = arr[i];

        olLis[i].style.backgroundColor = arr[i];

        olLis[i].index = i;

        olLis[i].onclick = function(){

            //给目标位置赋值(小盒子对应的大盒子距离顶部的距离)

            target = ulLis[this.index].offsetTop;

            clearInterval(timer);

            timer = setInterval(function(){

                var step = (target-leader)/10;

                step = step>0?Math.ceil(step):Math.floor(step);

                leader = leader+step;

                window.scrollTo(0,leader);

                if(target == leader){

                    clearInterval(timer);

                }

            },30)

        }

    }

</script>

楼梯跳跃代码web的更多相关文章

  1. 编写高质量代码:Web前端开发修炼之道（一）

    最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...

  2. 读《编写高质量代码-Web前端开发修炼之道》笔记

    第一章 1.Web标准由一系列标准组合而成,核心理念是将网页的结构,样式和行为分离,所以分为三大部分:结构标准,样式标准和行为标准.结构标准包括XML标准,XHTML标准,HTML标准:样式标准指CS ...

  3. 《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML

    本章内容: 标签的语义 为什么要使用语义化标签 如何确定你的标签是否语义良好 常见模块你真的很了解吗 标签的语义 HTML标签的设计都是有语义考虑的,部分标签的中文翻译图示及本章内容参看:3.1 标签 ...

  4. 《编写高质量代码-Web前端开发修改之道》笔记--第一章 从网站重构说起

    本章内容: 糟糕的页面实现,头疼的维护工作 Web标准--结构.样式和行为的分离 前端的现状 打造高品质的前端代码,提高代码的可维护性--精简.重用.有序 糟糕的页面实现,头疼的维护工作 工作中最大的 ...

  5. 《编写高质量代码——Web前端开发修炼之道》读后随笔

    结构样式行为的分离 结构标准包括XML标准.XHTML标准.HTML标准:样式标准有CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 通常的项目会按照如上的方式进行分离,但自己曾今做 ...

  6. Web 检测代码 web analysis 开源 open source

    1. Grape Web Statistics Grape Web Statistics is a fairly simple piece of analytics software. Grape i ...

  7. 《编写高质量代码-Web前端开发修改之道》笔记--第二章 团队合作

    本章内容: 揭秘前端开发工程师 欲精一行,必先通十行 增加代码的可读性--注释 提高重用性--公共组件和私有组件的维护 冗余和精简的矛盾--选择集中还是选择分散 磨刀不误砍柴工--前期的构思很重要 制 ...

  8. 编写高质量代码:Web前端开发修炼之道（四）

    这一节是继上一节高质量的Javascript 7)编程实用技巧 1:弹性 从 一个标签区和内容区的实例(就是点击不同的标签菜单显示不同的内容块)来说明不需要每个tabmenu都设置onclick事件, ...

  9. 编写高质量代码:Web前端开发修炼之道（三）

    第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续.下面是记录下来的笔记. 1)如何避免 ...

随机推荐

  1. 十一黄(xun)金(lian)周感想

    实际上并没有训整整一周-_-|| 只训了三天 听说纪中全员没过节(ΩДΩ)好可怕 这三天考了5场模拟赛,一场初赛模拟 让我感觉我和开学时比起来还是有很大的提升的 最主要就是在dp方面. 经过整个九月疯 ...

  2. Hive 01 概述、安装配置

    概述 数据仓库:是一个面向主题的.集成的.不可更新的.随时间不变化的数据集合,它用于支持企业或组织的决策分析处理. 数据仓库的结构和建立过程: 数据源 数据存储及管理 ETL Extract 提取 T ...

  3. iframe+json

    import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.serializer.PropertyFilter; impor ...

  4. 秀秀的森林（forest）

    秀秀的森林(forest) 题目要求树上两条不相交的链,且要求权值的和最大 性质: 1.如果某棵树上的最长链端点为x,y,则该树上任意一点z出发的最长链为max(xz,zy) 2如果两个点被连进了树里 ...

  5. 【转】 Linux中记录终端输出到txt文本文件

    转载: http://blog.csdn.net/tengh/article/details/41823883 一,把命令运行的结果保存到文件当中:用 > 把输出转向就可以了 例子: $ ls ...

  6. pat 甲级 1034. Head of a Gang (30)

    1034. Head of a Gang (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue One wa ...

  7. BZOJ 3910: 火车

    3910: 火车 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 358  Solved: 130[Submit][Status][Discuss] D ...

  8. Docker(五)：镜像

    一,什么是镜像? Docker的镜像文件是由文件系统叠加而成的.最底端是一个引导文件系统,即bootfs.Docker用户几乎永远没有机会和引导文件有什么交互,实际上,当一个容器启动之后,容器就会被移 ...

  9. CSU 1505: 酷酷的单词【字符串】

    Description 输入一些仅由小写字母组成的单词.你的任务是统计有多少个单词是“酷”的,即每种字母出现的次数都不同.比如ada是酷的,因为a出现2次,d出现1次,而1和2不同.再比如,banan ...

  10. Codeforces 691E Xor-sequences（矩阵加速DP）

    题目链接 Xor-sequences 利用矩阵加速. 先预处理出当序列长度为$2$的时候的方案数. 也就是说这个序列起点是$a[i]$终点是$a[j]$且中间没有任何元素. 但是所求的$k$很大,序列 ...