使用jquery实现页面正在加载的效果

来源：互联网发布：3309端口编辑：程序博客网时间：2024/05/29 16:01

Jquery是一个功能强大的易用的JavaScript库，在jquery中页面或内容正在加载的效果是很容易实现的。以下是一个使得你web 页面内容呈现一个加载的效果的例子。它会给你的读者留下深刻的印象。

它是一个很简单的想法。

1 创建一个div 隐藏块

这个div 块被用来实现内容渐进显示的页面加载的效果。

<divid="page_effect"style="display:none;">

<!-- this content is hide, need jQuery to fade in -->

</div>

2 jquery 逐渐消失的效果

创建一个jquery渐进的效果当文档准备展示时。

$(document).ready(function(){

        $('#page_effect').fadeIn(2000);

});

其中fadeIn() 是jquery内建的函数。

3 实例

完整的例子实现了逐渐加载的例子

<html>

<head>

<title>JQuery Page Loading Effect</title>

<scripttype="text/javascript"src="jquery.js"></script>

</head>

<scripttype="text/javascript">

$(document).ready(function(){

        $('#page_effect').fadeIn(2000);

});

</script>

<body>

<divid="page_effect"style="display:none;">

<h1>JQuery Page Loading Effect</h1>

    This is page loading effect with JQuery 1<BR>

    This is page loading effect with JQuery 2<BR>

    This is page loading effect with JQuery 3<BR>

    This is page loading effect with JQuery 4<BR>

    This is page loading effect with JQuery 5<BR>

    This is page loading effect with JQuery 6<BR>

    This is page loading effect with JQuery 7<BR>

    This is page loading effect with JQuery 8<BR>

    This is page loading effect with JQuery 9<BR>

    This is page loading effect with JQuery 10<BR>

    This is page loading effect with JQuery 11<BR>

    This is page loading effect with JQuery 12<BR>

    This is page loading effect with JQuery 13<BR>

    This is page loading effect with JQuery 14<BR>

</div>

</body>

</html>

效果：

开始效果

最后效果：

0 0