<!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. 牛客OI周赛7-普及组

    https://ac.nowcoder.com/acm/contest/372#question A.救救猫咪 #include <bits/stdc++.h> using namespa ...

  2. Selenium IDE 宏 试用 一例

    本质是宏(Macro)理念 Marco概念的广泛应用: 1.Office的Excel里的任何操作的 可以都可以用VBA编程记录下宏,然后把记录的宏,可以回放.当然也可以生成代码,比如给Excel设置单 ...

  3. Docker(十五)-Docker的数据管理(volume/bind mount/tmpfs)

    Docker提供了三种不同的方式用于将宿主的数据挂载到容器中:volumes,bind mounts,tmpfs volumes.当你不知道该选择哪种方式时,记住,volumes总是正确的选择. vo ...

  4. []转帖] 浅谈Linux下的五种I/O模型

    浅谈Linux下的五种I/O模型 https://www.cnblogs.com/chy2055/p/5220793.html  一.关于I/O模型的引出 我们都知道,为了OS的安全性等的考虑,进程是 ...

  5. pandas聚合aggregate

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/5/24 15:03 # @Author : zhang chao # @Fi ...

  6. TMainMenu - 隐藏与显示菜单

    //隐藏与显示菜单 Self.Menu := nil; {隐藏菜单} Self.Menu := MainMenu1; {显示菜单}

  7. Java之枚举举例

    package enumdemo; /** * 枚举类 */ public enum MAPPER { // 实例 ELEMENT_NAME("mapper"), ATTRIBUT ...

  8. Unsupported major.minor version ... JDK具体对应版本

    java.lang.UnsupportedClassVersionError: hudson/remoting/Launcher : Unsupported major.minor version 5 ...

  9. pycharm同级目录导入问题

    在PyCharm2017中同目录下import其他模块,会出现No model named ...的报错,但实际可以运行 这是因为PyCharm不会将当前文件目录自动加入source_path. 在当 ...

  10. bzoj2142: 礼物

    2142: 礼物 Description 一年一度的圣诞节快要来到了.每年的圣诞节小E都会收到许多礼物,当然他也会送出许多礼物.不同的人物在小E心目中的重要性不同,在小E心中分量越重的人,收到的礼物会 ...