因为打算扩充功能时使用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
Posts
