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 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
JavaScript如何操作css
Oct 24 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python抓取网页中链接的静态图片
2018/01/29 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python 内置模块详解
2019/01/01 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
20行python代码实现人脸识别
2019/05/05 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python urllib2运行过程原理解析
2020/06/04 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
优秀学生获奖感言
2014/02/15 职场文书
马智宇结婚主持词
2014/04/01 职场文书
结对共建工作方案
2014/06/02 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
只用20行Python代码实现屏幕录制功能
2021/06/02 Python