最开始加载页面是一排小字不动的，感觉比较单调，所以参考了滚动文字制作的一些文章写了这个滚动效果的代码。

样式预览

本博客目前使用的就是这个样式

1181

修改js

修改文件的地址

1
主题文件夹/layout/includes/loading/loading.pug

代码

请观察代码结构，不要盲目复制粘贴，根据代码结构将合适的代码放到合适的位置上。前两行代码不用复制。注意缩进。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#loading-box
  .spinner-box
    #loadingtxt
      ul#con1
        li.li-style 阐述清楚问题就解决了一半
        li.li-style 一致的体验是更好的体验
        li.li-style 创造允许犯错，设计要知道保留哪些
        li.li-style 想让用户爱上你的设计，先爱上你的用户
        li.li-style 好的设计是我们与竞争对手保持差距最重要的方式
        li.li-style 如果你觉得好的设计是昂贵的，你应该看看坏设计的成本
        li.li-style 像其他设计一样，视觉设计也是解决问题，不是个人喜好
        li.li-style 因为每个人都知道自己喜欢什么，所以每个人都觉得自己是用户界面专家
        li.li-style 易用性也许不可见，但却不可缺席
        li.li-style 如果我有1000个想法，即使最终只有一个实现了，我也会非常满意
        li.li-style 如果你发现你界面中某个元素需要说明，你需要重新设计
        li.li-style 简化意味着去掉不必要的元素，让必要元素凸显
        li.li-style 天才就是将复杂问题简单化的人
        li.li-style 不用盯着空白太久，勇敢的跨出第一步，其他的自然而然就会发生
        li.li-style 有些人认为设计就是看起来长什么样。 但是如果你深入挖掘就会发现设计更关乎如何运作
      ul#con2
    script(type='text/javascript').
      var area = document.getElementById('loadingtxt');
      var con1 = document.getElementById('con1');
      var con2 = document.getElementById('con2');
      var mytimer1 = null;
      var mytimer = null;
      var time = 1000 / 60;
      con2.innerHTML = con1.innerHTML;
      function scrollUp () {
      if (area.scrollTop >= con1.offsetHeight) {
      area.scrollTop = 0;
      } else {
      if (area.scrollTop % 25 == 0) {
      clearInterval(mytimer);
      clearInterval(mytimer1);
      mytimer1 = setTimeout(function () {
      mytimer = setInterval(scrollUp, time);
      }, 1000);
      }
      area.scrollTop++;
      }
      }
      mytimer = setInterval(scrollUp, time);

修改css

修改文件的地址

1
主题文件夹/source/css/_layout/loading.styl

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#loadingtxt {
    width: 100%;
    height: 25px;
    line-height: 25px;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    color: #AEAEAE;
    bottom: 30px;
  }
    .li-style {
      width: 100%;
      height: 25px;
      text-align: center;
   }

  ul,li{
  list-style:none;
  display:block;
  margin: 0;
  padding: 0;
}