<!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. Install Kernel 3.10 on CentOS 6.5

    http://bicofino.io/2014/10/25/install-kernel-3-dot-10-on-centos-6-dot-5/ https://gree2.github.io/lin ...

  2. CentOS7 截图

    https://blog.csdn.net/downing114/article/details/51433862 https://blog.csdn.net/lotluck/article/deta ...

  3. Linux下运行Shell脚本或者可执行文件Executable方法

    绝对路径 /xxx/xxx/something.sh /xxx/xxx/executable 相对路径 ./something.sh ./executable 注意:前边得加./,可不是像window ...

  4. css3 @media 实现响应式布局

    使用css3的@media,可以实现针对不同媒体.不同分辨率的响应式布局. 方法1:根据不同分辨率使用不同css文件 <link rel="stylesheet" media ...

  5. 文件系统的block 数据库中的block 以及内存中的page基础知识汇总(自己理解 可能有误)

    1. 操作系统文件系统中的的block 文件系统中的block 是文件系统最小的读写单元,在HDD的磁盘时代, 一般block的大小可能与磁盘的扇区大小一致为 512bytes 也因为这个原因MBR启 ...

  6. linux_shell自定义命令

    一.命令可执行文件所在目录 shell命令可执行文件所在目录是保存在环境变量PATH中的,终端输入如下命令查看 PATH 环境变量的内容: $ echo $PATH 我的linux输出如下: /opt ...

  7. PostgreSQL之连接数修改

    当前总共正在使用的连接数 select count(1) from pg_stat_activity; 显示系统允许的最大连接数 show max_connections; 显示系统保留的用户数 sh ...

  8. 用java编网页的学习流程,我的一些小心得(初学java到高深运用)

    (1)java基础:首先得会写int,String,for循环,数组,**等等(熟练各种基础的关键字,各种java自带的排序,随即等等算法)什么是封装,继承,多态,然后private,public,p ...

  9. codeforces510B

    Fox And Two Dots CodeForces - 510B Fox Ciel 正在玩一个手机拼图游戏,被称之为 "Two Dots".基础关卡是在一个大小为 n × m的 ...

  10. Windows 增加远程连接数

    转载自 https://blog.csdn.net/scholar_man/article/details/60570827 1.设置终端设置,需要打开[控制面板]---[系统和安全] 2.进入系统和 ...