<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul, ol {

            list-style: none;

        }

        html, body, ul, ul li {

            width: 100%;

            height: 100%;

        }

        ol {

            position: fixed;

            top: 50px;

            left: 50px;

        }

        ol li {

            width: 50px;

            height: 50px;

            border: 1px solid #000;

            text-align: center;

            line-height: 50px;

            cursor: pointer;

        }

    </style>

</head>

<body>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ul>

<ol>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ol>

<!--ol>li{$}*5-->

<script>

    var timer = null;

    //var leader = 0;

    //找人

    var ol = document.getElementsByTagName("ol")[0];

    var olLis = ol.children;

    var ul = document.getElementsByTagName("ul")[0];

    var ulLis = ul.children;

    var arr = ["red", "orange", "yellow", "green", "blue"];

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

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

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

    }

    /*window.onscroll = function () {

        leader = window.pageYOffset;//当前页面被卷去的头部

    };*/

    //给所有的olLis注册点击事件

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

        olLis[j].index = j;

        olLis[j].onclick = function () {

            //让窗体滚动到指定位置

            //就是要滚动到 要去的ul 的 offsetTop的值

            //当前点击的是ol中的哪个li 就去到ul中的那个li

            var target = ulLis[this.index].offsetTop;

            //window.scrollTo(0, target);

            //之前封装的缓动框架只能设置属性 而我们这里要的是一个渐渐变化的值

            clearInterval(timer);

            timer = setInterval(function () {

                //step = (target - leader) / 10

                //leader = leader + step

                var leader = window.pageYOffset;//当前页面被卷去的头部

                var step = (target - leader) / 10;

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

                leader = leader + step;

                //console.log(leader);

                window.scrollTo(0, leader);

                if (leader === target) {

                    clearInterval(timer);

                }

            }, 20);

        };

    }

</script>

</body>

</html>

javascript中全屏滑动效果实现的更多相关文章

  1. iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果

    8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...

  2. 手机端实现fullPage——全屏滚动效果

    封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,H ...

  3. 全屏滚动效果H5FullscreenPage.js

    前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...

  4. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  5. UINavigationController实现全屏滑动返回功能

    说明: UINavigationController默认在push出的控制器中都有边沿滑动返回功能,但是只能从屏幕左边滑才能返回,若从屏幕中间画并没有效果.下面实现全屏滑动功能. 探究: 系统默认能够 ...

  6. Android 高大上的侧滑菜单DrawerLayout，解决了不能全屏滑动的问题

    DrawerLayout预览 DrawerLayout主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图:   注意左上角那个图标,有木有很好玩,哈哈. ...

  7. 六一广告页H5全屏滚动效果实现

    明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...

  8. iOS - 全屏滑动

    取经地址 1.使用关联 关联是指把两个对象相互关联起来,使得其中的一个对象作为另一个对象的一部分. 使用关联,是基于关键字的,因此,我们可以为任意对象增加任意多的关联,但是关键字是唯一的.关联可以保证 ...

  9. 移动端全屏滑动的小插件，简单，轻便，好用，只有3k swiper,myswiper,page,stage

    https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...

随机推荐

  1. 【技术累积】【点】【java】【6】时间戳

    闲聊 加班多诶,写博客诶. 基本 时间戳,直观理解就是时间上面盖个戳罢了,在时间这个轴上面记录个点: unix时间戳表示从开始的时间点开始,经过了多少秒: 可以简单的看做是一个计时器: 基本定义可以直 ...

  2. spring cloud(二) zuul

    spring cloud 网关 zuul 搭建过程 1. 新建boot工程 pom引入依赖 <dependency> <groupId>org.springframework. ...

  3. 【转】【Oracle 集群】Linux下Oracle RAC集群搭建之Oracle DataBase安装（八)

    原文地址:http://www.cnblogs.com/baiboy/p/orc8.html   阅读目录 目录 数据库安装 参考文献 相关文章 Oracle 11G RAC数据库安装(八) 概述:写 ...

  4. python tips:类与实例的属性问题

    实例是具象化的类,它可以作为类访问所有静态绑定到类上的属性,包括类变量与方法,也可以作为实例访问动态绑定到实例上的属性. 实例1: class A: work = list("hello&q ...

  5. python与php生成二维码对比

    php生成二维码 include 引入的库单独下载 <?php header("Content-type:text/html;charset=utf-8"); error_r ...

  6. Alios-Things的学习与使用(1)

    目录 Alios-Things的学习与使用 1.简介 1.1 为什么要学alios-Things 2. 环境搭建 2.1 使用docker toolbox安装docker 2.2 测试使用dockde ...

  7. sublime Text3的使用

    sublime text百度百科: Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python ...

  8. ASP组件AspJpeg(加水印)生成缩略图等使用方法

    ASP组件AspJpeg(加水印)生成缩略图等使用方法 作者: 字体:[增加 减小] 类型:转载 时间:2012-12-17我要评论 ASPJPEG是一款功能相当强大的图象处理组件,用它可以轻松地做出 ...

  9. [HEOI2013]Eden 的新背包问题

    数据极水,不加优化的多重背包都能过...早知道考试的时候不加奇奇怪怪的卡常优化,卡了45分... 就是从前往后做一个多重背包,从后往前再做一个,问的时候就暴力求一下跳过这个的最佳方案... #incl ...

  10. 如何构建通用 api 中间层

    零.问题的由来 开门见山地说,这篇文章是一篇安利软文~,安利的对象就是最近搞的 tua-api. 顾名思义,这就是一款辅助获取接口数据的工具. 发请求相关的工具辣么多,那我为啥要用你呢? 理想状态下, ...