<!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. 使用PCL::GPU::遇到问题

    一:使用GPU进行点云分割,理论上可以极大地加快分割速度: 于是对PCL1.7.1进行了编译,回到32位系统,重设QT,编译成功(时间好漫长,一定要配置仔细,否则编译一次又一次浪费更多时间): 使用时 ...

  2. winserver2012安装.net 3.5

    运行 dism.exe /online /enable-feature /featurename:NetFX3 /Source:I:\sources\sxs

  3. WIN10打开网络共享文件夹提示0x80004005怎么解决？（转载）

    发布时间:2018-07-04 12:48 来源:www.pipimp3.com 作者:笔记本系统 WIN10打开网络共享文件夹提示0x80004005怎么解决?针对这个问题,小编整理了方案,有兴趣的 ...

  4. Pyhton学习——Day3

    # li = [1,12,9,"age","alex"]# #列表表示为[]括起来# #列表用","分割每个元素# #列表中的元素可以是数字 ...

  5. js提示是否删除

    第一种: <a href="javascript:if(confirm('确认删除吗?'))window.location='del.asp'">删除</a> ...

  6. 序列模型（5）-----双向神经网络（BRNN）和深层循环神经网络（Deep RNN）

    一.双向循环神经网络BRNN 采用BRNN原因: 双向RNN,即可以从过去的时间点获取记忆,又可以从未来的时间点获取信息.为什么要获取未来的信息呢? 判断下面句子中Teddy是否是人名,如果只从前面两 ...

  7. Mysql插入语句.txt

    INSERT INTO 目标表 SELECT * FROM 来源表;比如要将 articles 表插入到 newArticles 表中,则是:INSERT INTO newArticles SELEC ...

  8. [GSS5] Can you answer these queries V

    大力讨论. luogu上交spoj的题卡的一比... 难受 wa了好几次,原因大概首先求的是非空区间,不能乱和0取max,第二点是求无相交的解时,在两段求lmx和rmx的时候可以取max(0). 区间 ...

  9. ubuntu上的arm-elf-tools -20040427.sh 下载及安装问题的解决

    要完成uclinux在ARM上的移植,必须有这个工具. 下载地址:http://opensrc.sec.samsung.com/download.html 这个网站上还有许多其它资源可以下载.我选择 ...

  10. 【hiho一下第十二周】刷油漆

    [题目链接]:http://hihocoder.com/problemset/problem/1055 [题意] [题解] 设f[x][i]表示以第x个节点为根的子树; 不选x这个节点,然后子树里面选 ...