362 字2 分钟

网页装载JS特效任何网页适用

2007-03-15更新于 2015-10-06设计开发#JavaScript

这是从别人网站学习来的代码,现在分享出来,大家一起学习!

本效果适用于任何网站页面,下面提供出针对 Z-BLOG 单页日至的修改方法.其他页面,如首页,修改方法一样.

修改/TEMPLATE/single.html

找到 <head> 标签，在下面添加如下代码：

1
<style type="text/css">
2
  #loader_container {
3
    text-align: center;
4
    position: absolute;
5
    top: 40%;
6
    width: 100%;
7
    left: 0;
8
  }
9
  #loader {
10
    font-family: Tahoma, Helvetica, sans;
11
    font-size: 11.5px;
12
    color: #000000;
13
    background-color: #ffffff;
14
    padding: 10px 0 16px 0;
15
    margin: 0 auto;
16
    display: block;
17
    width: 230px;
18
    border: 1px solid #5a667b;
19
    text-align: left;
20
    z-index: 2;
21
  }
22
  #loader_bg {
23
    background-color: #e4e7eb;
24
    position: relative;
25
    top: 8px;
26
    left: 8px;
27
    height: 7px;
28
    width: 213px;
29
    font-size: 1px;
30
  }
31
  #progress {
32
    height: 5px;
33
    font-size: 1px;
34
    width: 1px;
35
    position: relative;
36
    top: 1px;
37
    left: 0px;
38
    background-color: #77a9e0;
39
  }
40
</style>
41
<script language="JavaScript">
42
  //读取框
43
  var t_id = setInterval(animate, 20);
44
  var pos = 0;
45
  var dir = 2;
46
  var len = 0;
47
  function animate() {
48
    var elem = document.getElementById("progress");
49
    if (elem != null) {
50
      if (pos == 0) len += dir;
51
      if (len > 32 || pos > 179) pos += dir;
52
      if (pos > 179) len -= dir;
53
      if (pos > 179 && len == 0) pos = 0;
54
      elem.style.left = pos;
55
      elem.style.width = len;
56
    }
57
  }
58
  function remove_loading() {
59
    this.clearInterval(t_id);
60
    var targelem = document.getElementById("loader_container");
61
    targelem.style.display = "none";
62
    targelem.style.visibility = "hidden";
63
    initJS();
64
  }
65
</script>

找到 <body> 标签，在下面添加：

1
<div id="loader_container">
2
  <div id="loader">
3
    <div align="center">本站页面正在用吃奶de劲加载中...</div>
4
    <div id="loader_bg"><div id="progress"></div></div>
5
    <div align="center">版权归 www.Wilf.cn 所有 ˉεˉ 别急嘛</div>
6
  </div>
7
</div>

修改 <body> 标签为：

1
<body onload="remove_loading()" onkeydown="PressKey()"></body>

为了方便使用，以上代码已经写成了 zblog 插件，http://bbs.zblogcn.com/thread-23157-1-2.html

网页装载JS特效任何网页适用

文章信息

历史留言归档