Blogger页面加载等待效果

今天新做了一个黑白简约风格的模板，用上了圆角。因为今天早上看了篇关于圆角的文章mozilla 和webkit的 CSS圆角.

因为打算扩充功能时使用jquery,所以顺便做了个加载等待效果。算是对页面加载转换效果的改进吧。

不过这个效果在ie6下似乎就挂了。正在努力改进中。

css代码:

/* loading */
#gloading {
  -webkit-border-radius: 5px 5px; 
  -moz-border-radius: 5px 5px;
  position:fixed;
  text-align: center;
  display: none; 
  top:50%;
  left:50%;
  margin:-100px 0 0 -100px;
  width:auto;
  height:auto;
  border:2px solid black;
  background-color: white;
  padding:1px;
  color:white;
}
#gloading div {
  -webkit-border-radius: 5px 5px; 
  -moz-border-radius: 5px 5px;
  font-size: 20px; 
  text-align: center;
  font-weight: bolder;
  width:auto;
  height:100%;
  padding:8px 20px;
  background-color: black;
}

js代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
 window.onbeforeunload = function() {
  var colors = ['#E7E7E7', '#D0D0D0', '#AFAFAF', 
   '#989898','#797979', '#5F5F5F', '#404040', 
   '#262626', '#0F0F0F'];
  var index = 0;
  $("#gloading").fadeIn("slow");
  setInterval(function() {
   if (index == colors.length) {
    index = 0;
    colors.reverse();
   }
   $("#gloading div").css("color", colors[index++]); 
  }, 80);
 } 
});
</script>

html代码:

<div id="gloading"><div>Loading, please wait...</div></div>

转载声明: 出自: Ghoul To World!作者: GreatGhoul