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面向对象之四 继承
Feb 08 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
手机端转换rem适应
Apr 01 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 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
Terran热键控制
2020/03/14 星际争霸
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
php mail to 配置详解
2014/01/16 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
银行会计业务的个人自我评价
2013/11/02 职场文书
工作表现评语
2014/01/19 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
2014年党支部工作总结
2014/11/13 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
详解Nginx 工作原理
2021/03/31 Servers
浅谈克隆 JavaScript
2021/11/02 Javascript