2007年5月31日星期四

blogger:页面加载转换效果(geuro修改版)

  从色彩斑斓的博客上看到了这个效果,但是感觉不是很满意,因为只有文字没有动画。在网上查了很久之后,做了一些修改。
  1.添加到<Head></head>之间。
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" />
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" />
  这段是滤镜效果,我把它去掉了,感觉常常让我等的很心急。
  2.添加到</body>之前。
<script language='JavaScript' type='text/javascript'>
function loading(){
document.getElementById("loading").style.display="block";
document.getElementById("loading").style.top=(document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop)+300+'px';
}
window.onbeforeunload=loading;</script>
<div id='loading'><div id='loadingtext'><strong>loading... </strong><br/><img src='http://justin0842.googlepages.com/ajax-loader.gif'/></div></div>
  3.加在]]></b:skin>之前。
#loading{
position:absolute;
top:300px;
left:0px;
width:100%;
text-align:center;
z-index:100;
display:none;
}

#loadingtext{
color:#ffffff;
font-weight: bold;
font-size: 18px;
width:222px;
height:50px;
padding-top:10px;
text-align:center;
border:1px solid #000000;
background:#ACE149;
margin:auto;
filter:Alpha(Opacity=90);
opacity:0.6;
}
  在ie下面动画不会动,目前还不知道怎么解决。如果有什么地方说错了,请指出。

1 个无聊的人:

dilihi 说...

这个效果真不错~~