欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼

 更新時(shí)間：2010年03月11日 16:54:04   作者：  
jquery其實(shí)是有個(gè)進(jìn)度條插件的，叫做jqueryprogressbar.js，可是想練習(xí)一下，就沒(méi)有用，自己寫了點(diǎn)代碼。這個(gè)代碼其實(shí)是參考別人的，因?yàn)樽约旱腏S基礎(chǔ)不是很好。

其實(shí)我本來(lái)的計(jì)劃是做網(wǎng)頁(yè)設(shè)計(jì)師的，可是沒(méi)有人認(rèn)為我設(shè)計(jì)的好，哥到現(xiàn)在還沒(méi)有工作，發(fā)泄一下，不多說(shuō)了。

效果圖

需要用到的圖片：

背景圖片：

進(jìn)度顯示圖片：

網(wǎng)頁(yè)結(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)文章

  • jQuery中remove()方法用法實(shí)例

    jQuery中remove()方法用法實(shí)例

    這篇文章主要介紹了jQuery中remove()方法用法,以三個(gè)不同的實(shí)例形式分別演示了remove()方法刪除元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2014-12-12
  • jQuery鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果

    jQuery鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果

    本篇文章主要介紹了jQuery鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-04-04
  • jQuery實(shí)現(xiàn)的簡(jiǎn)單手風(fēng)琴效果示例

    jQuery實(shí)現(xiàn)的簡(jiǎn)單手風(fēng)琴效果示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單手風(fēng)琴效果,結(jié)合實(shí)例形式分析了jQuery基于事件響應(yīng)、頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)手風(fēng)琴效果的方法,需要的朋友可以參考下
    2018-08-08
  • jquery+ajax請(qǐng)求且?guī)Х祷刂档拇a

    jquery+ajax請(qǐng)求且?guī)Х祷刂档拇a

    這兩天的工作內(nèi)容不多，基本是關(guān)于jquery中ajax的。之前一直都是寫的最簡(jiǎn)單的ajax請(qǐng)求，并沒(méi)關(guān)注怎么獲取ajax返回值的問(wèn)題。
    2015-08-08
  • jQuery的初始化與對(duì)象構(gòu)建之淺析

    jQuery的初始化與對(duì)象構(gòu)建之淺析

    之前本人的工作和學(xué)習(xí)多以原生js 為主，對(duì)jQuery 一直都不是很了解，但jQuery 作為當(dāng)今最優(yōu)秀的js 類庫(kù)之一，必須是要花時(shí)間好好學(xué)習(xí)下的，今天正好蛋疼，讀了里面一些代碼
    2011-04-04
  • jQuery表單對(duì)象屬性過(guò)濾選擇器實(shí)例詳解

    jQuery表單對(duì)象屬性過(guò)濾選擇器實(shí)例詳解

    這篇文章主要介紹了jQuery表單對(duì)象屬性過(guò)濾選擇器,結(jié)合實(shí)例形式詳細(xì)分析了jQuery針對(duì)表單元素進(jìn)行屬性過(guò)濾操作的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2016-09-09
  • JQuery控制Radio選中方法分析

    JQuery控制Radio選中方法分析

    這篇文章主要介紹了JQuery控制Radio選中方法,涉及jQuery表單操作及鼠標(biāo)事件響應(yīng)的方法,需要的朋友可以參考下
    2015-05-05
  • jQuery xml字符串的解析、讀取及查找方法

    jQuery xml字符串的解析、讀取及查找方法

    這篇文章主要介紹了jQuery xml字符串的解析、讀取及查找方法,涉及jQuery方法針對(duì)xml字符串的解析、讀取及遍歷查詢等操作相關(guān)技巧,需要的朋友可以參考下
    2016-03-03
  • jQuery實(shí)現(xiàn)導(dǎo)航樣式布局操作示例【可自定義樣式布局】

    jQuery實(shí)現(xiàn)導(dǎo)航樣式布局操作示例【可自定義樣式布局】

    這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航樣式布局操作,可實(shí)現(xiàn)基于jQuery的用戶自定義樣式布局與屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
    2018-07-07
  • jQuery中DOM節(jié)點(diǎn)的刪除方法總結(jié)（超全面）

    jQuery中DOM節(jié)點(diǎn)的刪除方法總結(jié)（超全面）

    這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)的刪除方法,文中介紹的很相信，內(nèi)容包括empty()的基本用法、remove()的有參用法和無(wú)參用法、empty和remove區(qū)別、保留數(shù)據(jù)的刪除操作detach()以及detach()和remove()區(qū)別，需要的朋友可以參考借鑒。
    2017-01-01

最新評(píng)論