Posted on 2009-06-03 23:12
疯狂水车 阅读(488)
评论(0) 编辑 收藏 引用 所属分类:
随想畅笔
因为数据多需要做一个页面loading效果,在网上搜寻了好久,却始终找不到一个自己想要的简单又好看的效果.很多人说没什么用,用的不是真正的数据Loading,这点我赞同,可我只是想要一个效果,让客户至少知道页面正在运行.搜寻了好几个,要嘛做法非常复杂.说真的根本就看不太懂.要嘛效果非常差,可以说还不如不要.对网上搜索的文章都不是很满意,所以就试着自己动脑筋想想.结合一些看过的文章.最后终于做出了自己想要的Loading效果.也很满意,不仅简单而且好看.下面是代码,你会知道是多么简单.
<%if display = "YES" then%>
<div id="Layer1" style="position:absolute; display: ; width:50px; text-align:center; top:300px;">
<font size=3 color="#003366"><b>Loading
</b></font>
<img src="images\loading.gif">
</div>
<%End if%>首先,一般在页面上,刚开始不需要运行SQL Query,等到选择搜索条件后再提交,让SQL Query运行.当提交按钮Onclick以后,我把display的值变成YES.在<DIV></DIV>里面我用到的style的显示方式是空,因为下面我会写一个javascript function showhide来变化让它显示.
function showhide(id)
{
if (document.getElementById)
{
obj = document.getElementById(id);
if (obj.style.display == "none")
{
obj.style.display = "";
}
else
{
obj.style.display = "none";
}
}
}
然后在你的数据显示快完的时候,在</BODY>之前再次把Loading图隐藏起来,也就是在</BODY>之前再次直接运行javascript showhide function 使图片隐藏起来.
<script >
var id = "Layer1";
if (document.getElementById)
{
obj = document.getElementById(id);
if (obj.style.display == "none")
{
obj.style.display = "";
}
else
{
obj.style.display = "none";
}
}
</script>
</form>
</body>
</html>
只要这两步就能达到在页面上做一个漂亮的Loading的效果.
