<!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之关于面向对象

    面向对象,呃,别给我说程序员找不到对象,那是windows才会出现的情况~~~ 就简单记下笔记什么的吧. 1.关于定义和赋值 之前总是搞混淆,说到底是没有搞清楚. shit bigOne=new sh ...

  2. jquery插件生成简单二维码

    除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="te ...

  3. App测试- adb monkey测试

    一. 安装和配置SDK 1. 下载Android SDK并解压.如下图:(如果不存在tool和platform_tool,请点击SDK Manager在线下载和更新) 2.下载完成后,配置SDK环境变 ...

  4. 编写可维护的javascript阅读笔记

    格式 变量 变量命名, 采取小驼峰大小写 变量使用名词, 函数前缀为动词 局部变量应统一定义在函数的最上面, 而不是散落在函数的任意角落. 赋初始值的定义在未赋初始值的变量的上面. 我个人建议不使用单 ...

  5. ubuntu18.0安装redis

    ubuntu版本:Ubuntu-Server 10.04.1 LTS redis版本:4.0.9 安装 使用apt安装 sudo apt-get update sudo apt-get install ...

  6. java 如何将异常Exception的信息转换为String

    一般情况下,我们是通过log4j封装的api将异常打印到日志当中. logger.error("error", e); 如果我们想在程序中获得该异常的详细信息,并输出到数据库中,我 ...

  7. python爬虫简单架构原理及示例

    网页下载器示例: # coding:utf-8 import urllib2 import cookielib url = "http://www.baidu.com" print ...

  8. Spring Boot 项目学习 (三) Spring Boot + Redis 搭建

    0 引言 本文主要介绍 Spring Boot 中 Redis 的配置和基本使用. 1 配置 Redis 1. 修改pom.xml,添加Redis依赖 <!-- Spring Boot Redi ...

  9. 【Git教程】Git教程及使用命令

      Git是目前世界上最先进的分布式版本控制系统,可以自动记录和管理文件的改动,还可以团队写作编辑,也就是帮助我们对不同的版本进行控制.2008年,GitHub网站上线,为开源项目提供免费存储,迅速发 ...

  10. 找不到javax.servlet.http.HttpServletResponse和javax.servlet.http.HttpServletRequest

    导了个项目进eclipse,发现很多文件都报了错,错误提示是没有引入javax.servlet.http.HttpServletRequest和javax.servlet.http.HttpServl ...