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.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
对于 Boxy弹出框的使用之前写过一些文章（查看jquery.boxy基础），今天主要是在解决一个需要之后，觉得值得把它记录下来，所以就再写一篇，主要功能是，在弹出对话框后，隔N秒后自动隐藏，还有就是自动跳转2013-01-01
正如标题所言cookie如何复制、使用与记住用户名，下面有个不错的示例，感兴趣的朋友可以参考下2013-11-11
这篇文章主要介绍了jQuery弹出窗口打开链接的实现代码,需要的朋友可以参考下2016-12-12
jQuery是一个优秀的JavaScript框架，可以很好的解决不同浏览器兼容的问题，尤其是在ASP.NET MVC下，它的作用更加的凸显。2009-12-12
这篇文章主要为大家详细介绍了最原始的jQuery注册验证方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效,需要的朋友可以参考下2015-03-03
因为要给新员工进行培训jQuery.UI方面的内容，我之前学习的都是jquery.ui-1.6b的，现在的版本升级到jquery-ui-1.7.1，除了样式上有很大调整以外，API也有了很大的变化。2009-08-08
这篇文章主要为大家介绍了如何利用JQuery实现相邻item焦点移动的效果，文中的示例代码讲解详细，对我们学习前端知识有一定的帮助，感兴趣的可以学习一下2022-04-04
使用jQuery.form.js/springmvc框架实现文件上传功能
这篇文章主要介绍了使用jQuery.form.js/springmvc框架实现文件上传功能，非常具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
使用 jQuery 上传带文件的表单时，会遇到一些小问题。今天小编抽时间给大家介绍使用 jQuery.ajax 上传带文件的表单遇到的问题，感兴趣的朋友一起看看吧2016-10-10
最新评论