이 문서의 예에서는 백분율 진행률 표시줄의 그라데이션 효과를 시뮬레이션하는 jquery 코드를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
여기서는 로딩률을 쉽게 볼 수 있도록 코드를 처리했습니다. 실제 사용에서는 필요하지 않습니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/
구체적인 코드는 다음과 같습니다.
<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>
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.