jQuery实现页面顶部显示的进度条效果完整实例
更新时间：2015年12月09日 11:27:29 作者：NW_KNIFE
这篇文章主要介绍了jQuery实现页面顶部显示的进度条效果,以完整实例形式分析了jQuery基于animate与setTimeout定时触发实现进度条渐进显示功能,非常简单实用,需要的朋友可以参考下
本文实例讲述了jQuery实现页面顶部显示的进度条效果。分享给大家供大家参考，具体如下：
具体代码如下：
<!Doctype html>
<html>
<head>
<title>页面顶部显示的进度条效果</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
</head>
<body>
<div id="web_loading"><div></div></div>
<script src="jquery1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">// < ![CDATA[
jQuery(document).ready(function(){
jQuery("#web_loading div").animate({width:"100%"},800,function(){
setTimeout(function(){jQuery("#web_loading div").fadeOut(500);
});
});
});
// ]]></script>
<style>
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#FF9F15;
}
</style
</body>
</html>
完整实例代码点击此处本站下载。
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件2009-07-07
下面小编就为大家带来一篇新闻上下滚动jquery 超简洁(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要为大家详细介绍了jquery+h5实现九宫格抽奖特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
大家应该都会有这样一种感觉，data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此。下面就来详细深入的学习下jQuery中的data()，感兴趣的朋友们可以参考借鉴。2016-12-12
jQuery选择器的强大不仅在于选择器支持基本的css选择符，还支持很多CSS的伪类选择符，甚至可以自定义选择符2013-04-04
深入解析jQuery中Deferred的deferred.promise()方法
这篇文章主要介绍了jQuery中Deferred的deferred.promise()方法,提醒千万要注意deferred.promise()与jQuery的.promise() 实例方法的区别,需要的朋友可以参考下2016-05-05
这篇文章主要为大家详细介绍了PHPjquery+ajax实现分页的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
因为最近技术长进缓慢，也没高手带，只能靠自己了，所以想仿个WEBQQ来锻炼下自己。做之前最好先把必要的东西准备好2011-12-12
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
网上发现一个很有意思的jQuery旋转插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现,感兴趣的朋友可以了解下2013-01-01
这篇文章主要介绍了jquery实现鼠标拖拽滑动效果来选择数字的方法,涉及jQuery鼠标事件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-05-05
最新评论