cari

Rumah >hujung hadapan web >tutorial js >jquery melaksanakan simulasi kesan kecerunan bar kemajuan peratusan code_jquery

jquery melaksanakan simulasi kesan kecerunan bar kemajuan peratusan code_jquery

WBOY
WBOYasal
2016-05-16 15:34:441345semak imbas

Contoh dalam artikel ini menerangkan kod jquery untuk mensimulasikan kesan kecerunan bar kemajuan peratusan. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Kod telah diproses di sini supaya anda boleh melihat peratusan pemuatan dengan mudah Ini tidak diperlukan dalam penggunaan sebenar.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/

Kod khusus adalah seperti berikut: 

<html>
<head>
<title>jquery模拟百分比进度条</title>
<script type='text/javascript' src='jquery1.3.2.js'></script>
<style>
#loading{ background:url(bak.png) 0 0 no-repeat; width:397px; height:49px;}
#loading div{ background:url(pro.png) 0 0 no-repeat; line-height:49px;height:49px; text-align:right;}
</style>
<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()",500);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
</script>
</head>
<body>
<div id="message"></div>
<div id="loading"><div>
</body>
</html>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pemalam kalendar Jquery untuk mencipta kalendar_jquery yang mudahArtikel seterusnya：Pemalam kalendar Jquery untuk mencipta kalendar_jquery yang mudah

Artikel berkaitan

Lihat lagi