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 相关文章推荐
jQuery 跨域访问问题解决方法
Dec 02 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 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开发大型项目的一点经验
2006/10/09 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
Three.js学习之网格
2016/08/10 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
Flask框架WTForm表单用法示例
2018/07/20 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
新闻专业应届生求职信
2013/10/31 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
秋季运动会稿件
2014/01/30 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
经典爱情感言
2015/08/03 职场文书
详解Python requests模块
2021/06/21 Python
python如何将mat文件转为png
2022/07/15 Python