大家可以用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)">
<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>
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一直在当前屏幕中间的代码
firefoxer
firefoxer浏览本店速度比用ie的速度快,用ie的比firefoxer看到的效果好……
很喜欢你的友情连接!
请问能提供源代码?因为寡人不是写程序出生的!呵呵~
http://blog.im321.com
[surprise] 这是手工的啊,与程序没关……你把图标搞走,再用li来列表,再用CSS控制一下高度和overflow,你看代码吧~<div style="height:250px;overflow-y:scroll;overflow-x:hidden;"></div>中就可以了~
这个效果在 Gecko 的浏览器下面可以看到,我试了 1.5 和 1.8
此外,在 Opera 下你的 overflow-y:scroll 一直没有效果,不知道是不是个案
opera没办法,他不支持这个属性……浏览器我还是尽量IE为主,FF为辅,OPERA无视中……
BS一下,偶天天用opera,居然无视我。。。
小米最近更新有点慢哦!
[yiw]
我的博客是Movable Type的,使用该代码后页面打开加载明显变慢,而且怎么在IE下不是加载的效果,是百合窗效果,在Firefox和Safari下是加载效果?
补上网址:www.youweilin.com