jQuery滑动加载进度条滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery滑动加载进度条滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery滑动加载进度条代码</title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<div class="votebox" style="margin:120px auto 0 auto">
	<dl class="barbox">
		<dd class="barline">
			<div w="50" style="width:0px;" class="charts"></div>
		</dd>
	</dl>
</div>


<script language="javascript">
function animate(){
	$(".charts").each(function(i,item){
		var a=parseInt($(item).attr("w"));
		$(item).animate({
			width: a+"%"
		},1000);
	});
}
animate();
</script>
</body>
</html>

CSS代码(css.css):

@charset "utf-8";body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0 auto;text-align:center;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
/* votebox */
.votebox{width:200px;margin-left:15px;text-align:left;position:relative;z-index:66;}
/* barbox */
.barbox{height:16px;line-height:16px;overflow:hidden;}
.barbox dt a{color:#0048CC;}
.barbox dd{float:left;}
.barbox dd.last{color:#999;}
.barbox dd.barline{width:200px;background:url(../images/jdtbg.png) left center no-repeat;height:16px;overflow:hidden;display:inline;}
.barbox dd.barline div.charts{height:16px;overflow:hidden;background:url(../images/barbg.gif) right center repeat-x;border-radius:8px;}

附件:下载该文件资源,减少时间成本(增值服务)