大家可以用IE点点本站的其它链接看看效果哦~比如顶部导航中的“踢馆!!!”
原理就是利用CSS的转换滤镜一定要把后面的元素一定要加载完成才会进行转换,还有监视是不是有离开本页的动作发生,组合起来就可以了~

这是加到页面head区域的CSS的转换滤镜

程序代码 程序代码
<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)">

用onbeforeunload事件来监视离开本页的动作然后控制ID为loading的DIV的显示,加到</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" style="position:absolute;top:300px;left:0px;width:100%;text-align:center;z-index:100;display:none;"><span style="color:#FFF;background-color:#C00;font-size:16px;"> ㊕㊢ 正在加载… </span></div>

这样就完成了,HOHO,这个也可以叫AJAX吧,虽然和“X”没什么关系……
其实这样做是让浏览的人等的时间长了一些,因为一定要等后面的页面loading结束后才会显示,所以没什么用,到是当离开页面时就出现这个loading有一些意思,感觉好有人工智能哦~

UPDATE 2006-12-27:加了一行让DIV一直在当前屏幕中间的代码