<!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. ThreadPoolExecutor源码解读

    1. 背景与简介 在Java中异步任务的处理,我们通常会使用Executor框架,而ThreadPoolExecutor是JUC为我们提供的线程池实现. 线程池的优点在于规避线程的频繁创建,对线程资源 ...

  2. JQuery Cross Domain Ajax(jsonp)

    http://www.pureexample.com/jquery/cross-domain-ajax.html http://www.pureexample.com/ExampleTesterII- ...

  3. node之jade和ejs的使用方法 jade篇

    let express = require('express'); let consolidate = require('consolidate'); let app = express(); // ...

  4. Jquery 组 tbale表格滚动条

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  5. 工资薪金VS劳务报酬

    工资薪金所得与劳务报酬所得两个征税项目在个人所得税应纳税所得额的计算.征收标准等方面都有所不同,因而在实际操作中不可相互混淆. 工资薪金所得属于非独立个人劳务活动,即在机关.团体.学校.部队.企事业单 ...

  6. Linux 下载安装配置Redis完整步骤

    安装: 1.获取redis资源 wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 tar xzvf redis-4.0.8. ...

  7. C#遍历类的属性，然后给其赋值

    public class PP { public string a { get; set; } public string b { get; set; } public string c { get; ...

  8. hdu 6393 Traffic Network in Numazu （树链剖分+线段树 基环树）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=6393 思路:n个点,n条边,也就是基环树..因为只有一个环,我们可以把这个环断开,建一个新的点n+1与之相 ...

  9. 自学Aruba5.1.2-带宽限制

    点击返回:自学Aruba之路 自学Aruba5.1.2-带宽限制 1 针对role --可以限制所有数据     注:带宽限制需要PEFNG许可证 单位可以是kbits或是mbits 可以是上传(up ...

  10. 洛谷 P1627 [CQOI2009]中位数 解题报告

    P1627 [CQOI2009]中位数 题目描述 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数是指把所有元素从小到大排列后,位于中间的数. 输入输出格式 输入格式 ...