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程序设计有所帮助。
相关文章
当函数作为其他函数的参数时和独立调用时，写法是有区别的，前者不用附加（），而后者必须加（）2012-03-03
下面小编就为大家带来一篇jquery实现全选和全不选功能效果的实现代码【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
本章节主要介绍了jQuery中dom操作的三种删除节点的方法，即remove()，detach()和empty()，并附上示例代码，非常实用，这里推荐给小伙伴们。2015-03-03
这篇文章主要介绍了Jquery使用val方法读写value值,实例分析了jQuery中val方法获取value值与赋值操作的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要是对jQuery的ajax使用场景进行了探讨。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
这篇文章主要介绍了jQuery 函数,结合实例形式分析了jquery函数声明、函数表达式、匿名函数等相关使用技巧,需要的朋友可以参考下2020-05-05
下面小编就为大家带来一篇JQuery在循环中绑定事件的问题详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要为大家详细介绍了jquery插件说下无缝轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
今天看到google图片搜索结果页面，感觉简洁实用，于是用jquery粗略的模仿了一下再次感觉到jquery的强大和易用，基本思路初步实现了，再整合ajax和json，应该可以做一个简单的应用了 :)2009-12-12
jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()2015-05-05
最新评论