jQuery页面加载效果

最新推荐文章于 2024-07-26 20:46:33 发布

cyan20115

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量791

点赞数 1

文章标签： javascript ViewUI

JQuery实际上是一个功能强大且方便JavaScript库。页面或内容加载效果很容易在jQuery中实现。这是使网页内容显示淡入页面效果的示例。这会让您的读者印象深刻。 🙂

这个想法很简单〜

1.创建一个带有内容隐藏的div块

此div块用于实现页面加载效果中的内容淡入。

<div id="page_effect" style="display:none;">
<!-- this content is hide, need jQuery to fade in -->
</div>

2. jQuery fadeIn效果

准备显示文档时创建jQuery fadeIn效果

$(document).ready(function(){	
	$('#page_effect').fadeIn(2000);
});

PS fadeIn（）是jQuery库的内置函数。

3.演示

试试演示

完整的jQuery代码可实现淡入效果。

<html>
<head>
<title>JQuery Page Loading Effect</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
	
	$('#page_effect').fadeIn(2000);

});

</script>
<body>
 
<div id="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>

标签： jquery jquery效果

翻译自: https://mkyong.com/jquery/page-loading-effects-with-jquery/

cyan20115

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery页面加载效果

JQuery实际上是一个功能强大且方便JavaScript库。页面或内容加载效果很容易在jQuery中实现。这是使网页内容显示淡入页面效果的示例。这会让您的读者印象深刻。 ???? 这个想法很简单〜 1.创建一个带有内容隐藏的div块此div块用于实现页面加载效果中的内容淡入。 <div id="page_effect" style="display:none;">...
复制链接

扫一扫