jQuery实现页面顶部显示的进度条效果完整实例


Posted in Javascript onDecember 09, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
js图片切换具体实现代码
Oct 13 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
深入浅析react native es6语法
Dec 09 #Javascript
JavaScript程序设计之JS调试
Dec 09 #Javascript
js实现的星星评分功能函数
Dec 09 #Javascript
JavaScript中的this到底是什么(一)
Dec 09 #Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 #Javascript
完美实现bootstrap分页查询
Dec 09 #Javascript
JavaScript脚本库编写的方法
Dec 09 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Django中几种重定向方法
2015/04/28 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
班级寄语大全
2014/04/10 职场文书
文明倡议书范文
2014/04/15 职场文书
协会周年庆活动方案
2014/08/26 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
销售会议开幕词
2015/01/28 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
重阳节主题班会
2015/08/17 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python