<!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. 关于Linux操作系统层次结构分析

    本文转自http://www.jb51.net/LINUXjishu/214104.html 首先来看一张图(这是Linux操作系统的大致层次结构): 最内层是硬件,最外层是用户常用的应用,比如说fi ...

  2. C# window服务操作

    public int GetWindowsServiceStartType(String sServiceName) //判断服务状态是手动还是禁用还是自动 { string sState = &qu ...

  3. openlayers5学习笔记-map事件(moveend)

    //事件:地图移动结束 tmp.map.on('moveend', function (evt) { console.log(evt.frameState.extent); }); evt.frame ...

  4. chrome安装插件，安装Postman

    1.下载postman插件,可以自己到网上下载,也可以点击http://download.csdn.net/detail/u010246789/9528471 2.解压文件,在解压后的文件夹中找到.c ...

  5. zTree 无子节点 单击事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. BA-Bacnet ip 、TCP/IP

    BACENT IP TCP/IP协议

  7. SVN中各种符号箭头含义

    黄色感叹号(有冲突): -- 这是有冲突了,冲突就是说你对某个文件进行了修改,别人也对这个文件进行了修改,别人抢在你提交之前先提交了,这时你再提交就会被提示发生冲突,而不允许 你提交,防止你的提交覆盖 ...

  8. vue v-for 渲染完成回调

    vue开发中等待vue渲染完成后加载数据的回调方法 Vue.nextTick(function () { alert("加载完成!"); }) 特别注意,如果使用ajax异步渲染的 ...

  9. openwrt针对RT5350代码下载，配置和编译

    转载地址:http://blog.csdn.net/dean_gdp/article/details/37091685 近期买了块官方板的RT5350: 先介绍代码下载.下面命令都是用登录用户运行,无 ...

  10. 看云-git类的书籍写作

    看云-git类的书籍写作 https://www.kancloud.cn/explore 测试一本:https://www.kancloud.cn/stono/b001/501901