<!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使用HTTPClient4.3开发的公众平台消息模板的推送功能

    代码引用,参考文章:http://www.cnblogs.com/feiyun126/p/4778556.html,表示感谢! package com.yuanchuangyun.cyb.manage ...

  2. vue的使用1

    Vue.$set(object, key, value); <!-- Alt + C --> <input @keyup.alt.="clear"> < ...

  3. add (db.collection.add)添加数据

    db.collection('cheshi').add({ data: { cheshi:4, } }).then((res) => { console.log(res) })

  4. TensorFlow中的优化算法

    搭建好网络后,常使用梯度下降类优化算法进行模型参数求解,模型越复杂我们在训练神经网络的过程上花的时间就越多,为了解决这一问题,我们就需要找一些优化算法来提高训练速度,TF的tf.train模块中提供了 ...

  5. ELK日志框架（1）：安装Elasticsearch组建单服务器多节点集群

    ELK简介 最近有个需求搭建一套日志系统用于集成几个业务系统的日志提供快速的检索功能,目前是用Log4net存数据库+Error级别发邮件方式,也算简单暴力好用,但历史日志的模糊查询确实很慢,所以使用 ...

  6. inf

    下确界 inf,表示下确界,英文名infimum. 对于函数y=f(x),在使f(x)大于等于M成立的所有常数M中,我们把M的最大值max(M)(即函数y=f(x)的最小值)叫做函数y=f(x)的下确 ...

  7. r=a*（1-sinx）

    a=-2*pi:.001:2*pi; %设定角度b=(1-sin(a)); %设定对应角度的半径polar(a, b,'r') %绘图 夏目漱石“今夜月色很好” 王家卫“我已经很久没有坐过摩托车了,也 ...

  8. Gitblit 的安装使用

    1.下载gitblit,可以网上下载,也可以在下面云盘链接取 gitblit-1.8.0  下载链接:https://pan.baidu.com/s/1x7dnbyDp1FmYjMosJbGR8w 密 ...

  9. C++ 日期时间使用

    #include <time.h> #include <stdio.h> #include <iostream> #include <string> # ...

  10. python+django+uwsgi 搭建环境

    第一步: 搭建python环境 最好使用  pyenv可以很好的管理多版本下的python环境 第二步:搭建django环境 使用    pip install django==1.12.1   来安 ...