纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)


Posted in HTML / CSS onApril 16, 2014

一、纯CSS实现

昨天在网上闲逛时,看到一个博客的页面最顶部有一个进度条特效,感觉挺好的,就分析了一下代码,找出了其中的关键部份,使用纯CSS实现的,给大家分享一下。

复制代码
代码如下:

<style type="text/css">
body{ margin:0; padding:0;}
@-moz-keyframes progressing {
0% {
width:0px;
}
100% {
width:100%;
}
}
@-webkit-keyframes progressing {
0% {
width:0px;
}
100% {
width:100%;
}
}
.progress {
width:100%;
height:5px;
overflow:hidden;
background-color:#27ccc0;
position:fixed;
top:0;
left:0;
z-index:9;
-moz-animation:progressing 2s ease-out;
-webkit-animation:progressing 2s ease-out;
}
</style>
<p class="progress"></p>

二、JQuery实现

一个在页面顶部显示的进度条效果,像在智能手机上浏览网页一样,手机上的浏览器进度条一般都在屏幕顶部,一条极细的小线条,当页面加载的时候,它就不断的加载显示进度,本网页进度条特效与此十分相似,基于jquery插件实现的效果。

复制代码
代码如下:

<title>页面顶部显示的进度条效果</title>
<div id="web_loading"><div></div></div>
<script src="/ajaxjs/jquery-1.7.2.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>
HTML / CSS 相关文章推荐
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 #HTML / CSS
css3新增颜色表示方式分享
Apr 15 #HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 #HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 #HTML / CSS
css3发光搜索表单分享
Apr 11 #HTML / CSS
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
php 禁止页面缓存输出
2009/01/07 PHP
PHP 数组遍历顺序理解
2009/09/09 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
javascript 写类方式之五
2009/07/05 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
vuex的使用步骤
2021/01/06 Vue.js
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python中使用中文的方法
2011/02/19 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
django的ORM操作 增加和查询
2019/07/26 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
python中reload重载实例用法
2020/12/15 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
应届大专毕业生自我鉴定
2014/04/08 职场文书
警示教育活动总结
2014/05/05 职场文书
民政局个人整改措施
2014/09/24 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android