<!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. Eclipse中Git的基本使用

    以下所有命令如没有特殊说明,均在命令行中完成(cmd窗口) 1.全局设定(需要告诉git自己是谁)    git config --global user.name "你的名字或昵称&quo ...

  2. 如何在CorelDRAW中创建对象阴影

    阴影工具可以为对象创建光线映射的阴影效果,使对象产生较强的立体感.可以为大多数对象或群组对象添加阴影,其中包括美术字.段落文本和位图.创建对象阴影可以增加视觉层次,使图形更加逼真. CorelDRAW ...

  3. input左减右加

    <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" ...

  4. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

  5. js脚本捕获页面 GET 方式请求的参数？其实直接使用 window.location.search 获得

    js脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得

  6. 沃通SSL证书、代码签名证书应用于机器人安全防护

    近两年,扫地机器人.智能音箱等消费级机器人产品逐渐走入大众生活的中.随着人工智能技术的迅猛发展,预计2023年全球消费级机器人市场规模将达到150亿美元.然而,产业的迅猛发展却伴随着安全防护的缺失,安 ...

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

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

  8. WEBGL学习【十四】利用HUD技术在网页上方显示三维物体

    关键点: <!--实现原理:要保证这两个canvas相互重叠;z-index表示了两个画布的上下层关系--> <!--是WEBGL的三维图形Canvas(主要用于绘制三维场景)--& ...

  9. 把SQLAlchemy查询对象转换成字典/json使用(分开)

    注:针对的是查询出来的是单条对象 多个对象的话可以使用for循环遍历查询出来的对象列表,也可以使用下面的方法 1.config.py文件 #!/usr/bin/env python #-*- codi ...

  10. hdu 1702 栈和队列的简单应用

    #include<stdio.h> #include<string.h> #include<queue> #include<stack> using n ...