jquery 簡單的進度條實現(xiàn)代碼
更新時間：2010年03月11日 16:54:04 作者：
jquery其實是有個進度條插件的，叫做jqueryprogressbar.js，可是想練習(xí)一下，就沒有用，自己寫了點代碼。這個代碼其實是參考別人的，因為自己的JS基礎(chǔ)不是很好。
其實我本來的計劃是做網(wǎng)頁設(shè)計師的，可是沒有人認為我設(shè)計的好，哥到現(xiàn)在還沒有工作，發(fā)泄一下，不多說了。
效果圖
需要用到的圖片：
背景圖片：
進度顯示圖片：
網(wǎng)頁結(jié)構(gòu)：
復(fù)制代碼 代碼如下:
<div id="center">
<div id="message"></div>
<div id="loading"><div></div></div>
</div>
css代碼：
代碼
復(fù)制代碼 代碼如下:
#center{
margin:50px auto;
width:400px;
}
#loading{
width:397px;
height:49px;
background:url(bak.png) no-repeat;
}
#loading div{
width:0px;
height:48px;
background:url(pro.png) no-repeat;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
line-height:48px;
}
#message{
width:200px;
height:35px;
font-family:Tahoma;
font-size:12px;
background-color:#d8e7f0;
border:1px solid #187CBE;
display:none;
line-height:35px;
text-align:center;
margin-bottom:10px;
margin-left:50px;
JavaScript代碼：
代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
var progress_id = "loading";
function SetProgress(progress) {
if (progress) {
$("#" + progress_id + " > div").css("width", String(progress) + "%"); //控制#loading div寬度
$("#" + progress_id + " > div").html(String(progress) + "%"); //顯示百分比
}
}
var i = 0;
function doProgress() {
if (i > 100) {
$("#message").html("加載完畢！").fadeIn("slow");//加載完畢提示
return;
}
if (i <= 100) {
setTimeout("doProgress()", 100);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
</script>
您可能感興趣的文章:
相關(guān)文章
有些時候需要根據(jù)瀏覽器來寫樣式，所以要判斷一下瀏覽器類型，百度了一下，才知道JQuery有個方法直接判斷，并附上原生的js的判斷方法，分享給大家，有需要的小伙伴可以參考下。2015-05-05
給指定id或class的元素綁定（bind）事件時，對于改變或新加的元素，事件不會起作用，這時我們就要用live函數(shù)，它可以讓子元素繼承父元素的事件。2010-12-12
jquery插件lazyload.js延遲加載圖片的使用方法
lazyload.js是一個基于JQuery的插件，可以用來緩沖加載圖片。下面介紹這個插件的使用方法2014-02-02
這篇文章主要介紹了jquery僅用6行代碼實現(xiàn)滑動門效果,涉及jquery樣式變換的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-09-09
有的時候我們希望保留右上的X，同時使用fancybox 的modal模式，怎么辦呢2012-10-10
jQuery獲取table表中的td標(biāo)簽(實例講解)
下面小編就為大家?guī)硪黄猨Query獲取table表中的td標(biāo)簽(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了利用jQuery中的ajax分頁實現(xiàn)代碼的相關(guān)資料，對ajax分頁感興趣的朋友可以參考一下2016-02-02
本篇文章分享了基于jQuery實現(xiàn)的幻燈圖片切換效果的部分代碼。感興趣的朋友可以下載實例運行，下面就跟小編一起來看看吧2016-12-12
jquery刷新頁面的實現(xiàn)代碼（局部及全頁面刷新）
jquery刷新頁面的實現(xiàn)代碼（局部及全頁面刷新） ，需要的朋友可以參考下。2011-07-07
Jquery實現(xiàn)多個表格的全選復(fù)選框功能方式
這篇文章主要介紹了Jquery實現(xiàn)多個表格的全選復(fù)選框功能方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12