<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style media="screen">

         * {

             margin: 0;

             padding: 0;

         }

         body,

         html {

             height: 100%;

         }

         ul {

             list-style: none;

             height: 100%;

         }

         ul li {

             height: 100%;

         }

         ol {

             list-style: none;

             position: fixed;

             top: 80px;

             right: 50px;

         }

         ol li {

             width: 50px;

             height: 50px;

             border: 1px solid #000;

             text-align: center;

             line-height: 50px;

             margin-top: -1px;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <ul>

         <li>January</li>

         <li>February</li>

         <li>March</li>

         <li>April</li>

         <li>May</li>

         <li>June</li>

     </ul>

     <ol>

         <li>1月</li>

         <li>2月</li>

         <li>3月</li>

         <li>4月</li>

         <li>5月</li>

         <li>6月</li>

     </ol>

     <script src="animate.js"></script>

     <script type="text/javascript">

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

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

         var ulLiArr = ul.children;

         var olLiArr = ol.children;

         var target = 0;

         var leader = 0;

         var timer = null;

         //设置一个数组，里面装颜色，然指定的颜色给数组中的指定元素

         var arrColor = ["mistyrose", "lemonchiffon", "aliceblue", "lightcyan", "honeydew", "snow"];

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

             //上色

             ulLiArr[i].style.backgroundColor = arrColor[i];

             olLiArr[i].style.backgroundColor = arrColor[i];

             //属性绑定索引值

             window.onscroll = function(){

                 leader = scroll().top;

             }

             olLiArr[i].index = i;

             olLiArr[i].onclick = function(){

                 target = ulLiArr[this.index].offsetTop;

                 clearInterval(timer);

                 //利用缓动动画原理实现屏幕滑动

                 timer = setInterval(function(){

                     var step = (target - leader) / 10;

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

                     //屏幕滑动

                     leader = leader + step;

                     window.scrollTo(0,leader);

                     if (Math.abs(target - leader) <= Math.abs(step)) {

                         window.scrollTo(0,target);

                         clearInterval(timer);

                     }

                 },25);

             }

         }

     </script>

 </body>

 </html>

javascript 小清新颜色翻页效果的更多相关文章

  1. javascript移动端 电子书 翻页效果

    1.后端给一长串的纯文本 2.前端根据屏幕的高度,将文本切割为 n 页 3.使用插件 turn.js 将切割好的每页,加上翻书效果 <!DOCTYPE html> <html lan ...

  2. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  3. transform3D实现翻页效果

    ---恢复内容开始--- 闲篇 最近升级了下百度音乐,唯一的感觉就是动画效果很炫丽.我不是个对产品很敏感的人,但是这段时间观察一些大厂的产品发现现在的APP越来越重视动画效果了.大家可能没有注意过,连 ...

  4. c#翻页效果

    用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...

  5. css实现翻页效果

    如图,鼠标移动到图上,实现右上角翻页的效果,本例主要border边框的设置. 一.基本概念 <html> <head> <style> #demo{ width:0 ...

  6. （旧）子数涵数·PS ——翻页效果

    一.首先在网络上下载一张图片,作为素材.这是我下载的素材,至于为什么选择这张照片呢,当然不是因为自己的一些羞羞的念头啦. 二.打开Photoshop,我使用的版本是CS3(因为CS3所占的磁盘空间较小 ...

  7. ajax翻页效果模仿yii框架

    ajax翻页效果,模仿yii框架. 复制代码代码如下: <!DOCTYPE html>  <html>  <head>  <title>ajax分页_w ...

  8. Android 实现书籍翻页效果----升级篇

    自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...

  9. CSS3-----图片翻页效果的展示

    在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果: 显示效果如下: 首先是页面的布局,不用那么复杂; a标签的href属性,一般 ...

随机推荐

  1. JAVA面对对象(三)——Super、static、final关键字

    Super 使用super关键字可以直接调用父类中的构造方法.属性.普通方法 super调用父类构造方法的操作,与this调用构造方法一样,语句必须放在子类构造方法的首行 public class P ...

  2. Golang的格式化输出fmt.Printf

    本文来源:Go by example. Golang的格式化输出 和 C语言的标准输出基本一样,但是增加了一些针对Golang语言的特有数据结构的格式化输出方式. 一下就是实例: package ma ...

  3. DELPHI XE10，JSON 生成和解析，再利用INDYHTTP控件POST

    Delphi XE10,Json 生成和解析,再利用indyhttp控件Post 年09月20日 :: 阅读数: --不多说,直接上代码 procedure TFrmMain.Brand; var J ...

  4. [书摘]Windows内存管理术语

    1. Virtual Address space 虚拟地址空间 一个应用程序能够访问的最大的内存地址空间, 32位的机器上面最大的就是4GB 但是 并不是所有的内存都放到主存里面, 可能放到pagef ...

  5. 二叉排序树类的： C++ 实现

    #include<iostream> using namespace std; template<class T> struct TreeNode { T element; T ...

  6. 【Java】 异常

    异常分类 所有的异常都是由Throwable继承而来,但在下一层理解分解为两个类Error和Exception. Error类层次结构描述了Java运行时系统的内部错误和资源耗尽错误.应用程序不应该跑 ...

  7. solr string类型表示不支持分词

    solr string类型表示不支持分词

  8. BZOJ4034[HAOI2015]树上操作——树链剖分+线段树

    题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有点的点权都 ...

  9. BZOJ4372 烁烁的游戏（动态点分治+线段树）

    建出点分树,每个节点维护其作为点分树上lca对子树内点的贡献,线段树维护即可,同时另开一个线段树以减掉父亲重复的贡献. #include<iostream> #include<cst ...

  10. MT【3】只有零向量旋转不变

    解答: 评:利用了零向量方向不唯一的性质.