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>