javascript small fresh color page turning effect

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8     <style media="screen">
  9         * {
 10             margin: 0;
 11             padding: 0;
 12         }
 13         body,
 14         html {
 15             height: 100%;
 16         }
 17         ul {
 18             list-style: none;
 19             height: 100%;
 20         }
 21         ul li {
 22             height: 100%;
 23         }
 24         ol {
 25             list-style: none;
 26             position: fixed;
 27             top: 80px;
 28             right: 50px;
 29         }
 30         ol li {
 31             width: 50px;
 32             height: 50px;
 33             border: 1px solid #000;
 34             text-align: center;
 35             line-height: 50px;
 36             margin-top: -1px;
 37             cursor: pointer;
 38         }
 39     </style>
 40 </head>
 41 <body>
 42     <ul>
 43         <li>January</li>
 44         <li>February</li>
 45         <li>March</li>
 46         <li>April</li>
 47         <li>May</li>
 48         <li>June</li>
 49     </ul>
 50     <ol>
 51         <li>1月</ li>
 52         <li>2月</li>
 53         <li>3月</li>
 54         <li>4月</li>
 55         <li>5月</li>
 56         <li>6月</li>
 57     </ol>
 58 
 59     <script src="animate.js"></script>
 60     <script type="text/javascript">
 61         var ul = document.getElementsByTagName("ul")[0];
 62         var ol = document.getElementsByTagName("ol")[0];
 63         var ulLiArr = ul.children;
 64         var olLiArr = ol.children;
 65         var target = 0;
 66         var leader = 0;
 67         var timer = null;
 68 
 69         //设置一个数组，里面装颜色，然指定的颜色给数组中的指定元素
 70         var arrColor = ["mistyrose", "lemonchiffon", "aliceblue", "lightcyan", "honeydew", "snow"];
 71         for (var i = 0; i < arrColor.length; i++) {
 72             //上色
 73             ulLiArr[i].style.backgroundColor = arrColor[i];
 74             olLiArr[i].style.backgroundColor = arrColor[i];
 75 
 76             //属性绑定索引值
 77 
 78             window.onscroll = function(){
 79                 leader = scroll().top;
 80             }
 81             
 82             olLiArr[i].index = i;
 83 
 84 
 85             olLiArr[i].onclick = function(){
 86 
 87                 target = ulLiArr[this.index].offsetTop;
 88 
 89                 clearInterval(timer);
 90 
 91                 //利用缓动动画原理实现屏幕滑动
 92                 timer = setInterval(function(){
 93                     var step = (target - leader) / 10;
 94                     step = step > 0 ? Math.ceil(step) : Math.floor(step);
 95 
 96                     //屏幕滑动
 97                     leader = leader + step;
 98                     window.scrollTo(0,leader);
 99 
100                     if (Math.abs(target - leader) <= Math.abs(step)) {
101                         window.scrollTo(0,target);
102                         clearInterval(timer);
103                     }
104                 },25);
105             }
106         }
107 
108 
109     </script>
110 </body>
111 </html>
javascript small fresh color page turning effect

Guess you like
