页面加载显示进度条
2016-01-11 20:44
459 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>页面加载显示进度条</title> <script type="text/javascript" src="serve/jquery-1.6.1.min.js"></script> <!--引入一个jQuery文件--> </head> <style type="text/css"> *{ margin:0; } .loading{ background:#FF6100; /*设置进度条的颜色*/ height:5px; /*设置进度条的高度*/ position:fixed; /*设定进度条跟随屏幕滚动*/ top:0; /*将进度条固定在页面顶部*/ z-index:99999 /*提高进度条的优先层级,避免被其他层遮挡*/ } </style> <body> <div class="loading"></div> <!-- 这是用于显示进度条的一个容器 --> </body> <script type="text/javascript"> $(document).ready(function(){ // 可能大家会问,为什么速度变成了50毫秒?因为之前一步加载为100%的动画被分成份,所以为了保证动画的连贯性,将其每份切分成为50毫秒。 $(".loading").animate({"width":"30%"},50); $(".loading").animate({"width":"60%"},50); $(".loading").animate({"width":"70%"},50); $(".loading").animate({"width":"100%"},50); $('.loading').fadeOut('slow'); //页面加载完成, 隐藏进度条 }); </script> </html>
相关文章推荐
- 2016三星的全面反击战能打响吗?
- 自己开发网站全文检索系统
- 【剑指offer】4.3举例让抽象问题具体化——面试题25:二叉树中和为某一值的路径
- 【poj3233】Matrix Power Series 矩阵+快速幂
- 【剑指offer】4.3举例让抽象问题具体化——面试题24:二叉搜索树的后序遍历序列
- SGI Allocator内存管理(一)
- HDU 1494 跑跑卡丁车 (分段DP)
- 训练指南(白书)第二章:数学基础
- python 列表和元组
- POJ_P1274 The Perfect Stall(二分图匹配+匈牙利算法)
- CocoaPods 的个人使用总结
- Git版本恢复命令reset
- 序列化机制
- 【剑指offer】4.3举例让抽象问题具体化——面试题23:从上往下打印二叉树
- 【银行家算法】操作系统课程设计
- 【jsp】The superclass “javax.servlet.http.HttpServlet” was not found on the Java Build Path
- ContentProvider实现两个程序间共享数据
- 创建数据库普通临时表和创建数据库全局变量表和俩者的区别
- 《从零开始自学iOS》_02
- Android studio 开发环境搭建