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

样式预览

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

-w1181

修改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;
}