純CSS和jQuery實現(xiàn)的在頁面頂部顯示的進度條效果2例(仿手機瀏覽器進度條效果)
發(fā)布時間:2014-04-16 14:36:12 作者:佚名
我要評論

這篇文章主要介紹了純CSS和jQuery實現(xiàn)的在頁面頂部顯示的進度條效果2例,仿手機瀏覽器進度條效果,分別使用純CSS和jQuery實現(xiàn),需要的朋友可以參考下
一、純CSS實現(xiàn)
昨天在網(wǎng)上閑逛時,看到一個博客的頁面最頂部有一個進度條特效,感覺挺好的,就分析了一下代碼,找出了其中的關(guān)鍵部份,使用純CSS實現(xiàn)的,給大家分享一下。
復(fù)制代碼
代碼如下:<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實現(xiàn)
一個在頁面頂部顯示的進度條效果,像在智能手機上瀏覽網(wǎng)頁一樣,手機上的瀏覽器進度條一般都在屏幕頂部,一條極細的小線條,當(dāng)頁面加載的時候,它就不斷的加載顯示進度,本網(wǎng)頁進度條特效與此十分相似,基于jquery插件實現(xiàn)的效果。
復(fù)制代碼
代碼如下:<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>
相關(guān)文章
基于jquery實現(xiàn)的Flash加載遠程圖片帶進度條顯示效果
這是一個Flash結(jié)合jquery實現(xiàn)的特效,加載遠程圖片顯示進度條,對進度條可方便的定義,代碼內(nèi)loadBg為背景DIV,loading為加載條DIV,loadText為百分比DIV;加載完畢后回調(diào)2010-05-30基于 jQuery的JProgressBar Demo文件加載進度條演示效果1.0
JProgressBar 1.0加載進度條演示Demo文件,關(guān)于JProgressBar類的用法: * 創(chuàng)建一個進度條2011-06-23可設(shè)定走動速度限定時間的jQuery動態(tài)進度條效果插件
通過此插件可以很容易的實現(xiàn)動態(tài)進度條,可以設(shè)定進度條走動的速度,可以限定時間2013-09-12- 一款來自O(shè)PPO手機官方網(wǎng)站的jquery焦點圖,帶有進度條,索引按鈕,自動輪播切換特效2014-02-18
汽車網(wǎng)站jquery帶進度條焦點圖可以實現(xiàn)全屏的效果
一款帶進度條的焦點圖片特效jquery插件,圖片作成很大時看上去可以實現(xiàn)全屏的效果,進度條上還帶有一個小圖標跟隨焦點滑動2014-03-11jquery/CSS3實現(xiàn)的相冊圖片加載進度條特效源碼
這是一款jQuery+CSS3實現(xiàn)的相冊圖片加載進度條特效源碼,加載圖片過程中在頁面頂部出現(xiàn)藍色的進度條,右上角有不停轉(zhuǎn)動的loading效果,可以點擊按鈕加載更多圖片,結(jié)合jQue2014-07-24基于jquery實現(xiàn)的帶有數(shù)字顯示的加載進度條特效源碼
基于jquery實現(xiàn)的帶有數(shù)字顯示的加載進度條特效源碼是一段小巧的 JavaScript 插件,運行流暢,反應(yīng)速度靈敏,是一段非常優(yōu)秀的特效源碼2014-10-17jquery實現(xiàn)3D立體效果的動畫加載進度條源碼
這是一款基于jquery實現(xiàn)3D立體效果的動畫加載進度條源碼。這里展示了多種顏色風(fēng)格的3D進度條效果。具有非常強的立體感。適合做手機端使用2015-11-03- 基于jQuery實現(xiàn)滑動加載進度條特效源碼是一款簡單實用的動態(tài)進度條加載特效代碼,支持更改顏色以及用圖片替代,本段代碼簡單易懂,喜歡的小伙伴直接下載哦2015-12-20