纯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 Backgrounds属性相关介绍
May 11 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 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 MSSQL 存储过程的方法
2008/12/24 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
我就是这样学习Python中的列表
2019/06/02 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
教师自荐信
2013/12/10 职场文书
清洁工岗位职责
2014/01/29 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
保护环境建议书400字
2014/05/13 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang