jquery+html5实现进度条加载滑动滚动特效代码

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

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

以下是 jquery+html5实现进度条加载滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>jquery+html5实现进度条加载特效</title>
  <link rel="stylesheet" href="styles/progressbar.css">
</head>
<body>
<br><br>
  <section class="container">
    <div class="progress">
      <span class="blue" style="width:0%;"><span>0%</span></span>
    </div>
  </section>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type='text/javascript'>
	function loading(percent){
		$('.progress span').animate({width:percent},1000,function(){
			$(this).children().html(percent);
            if(percent=='100%'){
                $(this).children().html('加载完成,正在转向首页...&nbsp;&nbsp;&nbsp;&nbsp;');
                setTimeout(function(){
                    $('.container').fadeOut();
					location.href="#";
                },1000);
            }
		})
	}
  </script>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">loading('5%');</script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">loading('20%');</script>
<script type="text/javascript" src="js/CFInstall.min.js"></script>
<script type="text/javascript">loading('40%');</script>
<script type="text/javascript" src="js/ext-core.js"></script>
<script type="text/javascript">loading('70%');</script>
<script type="text/javascript" src="js/mootools-yui-compressed.js"></script>
<script type="text/javascript">loading('100%');</script>
<script type="text/javascript" src="js/dojo.xd.js"></script>
</body>
</html>

JS代码(CFInstall.min.js):

// Copyright (c) 2009 The Chromium Authors. All rights reserved.// Use of this source code is governed by a BSD-style license that can be// found in the LICENSE file.(function(e){
	if(!e.CFInstall){
	var f=function(a,b){
	return typeof a=="string"?(b||document).getElementById(a):a}
,h=function(){
	if(e.CFInstall._force)return e.CFInstall._forceValue;
	if(navigator.userAgent.toLowerCase().indexOf("chromeframe")>=0)return true;
	if(typeof window.ActiveXObject!="undefined")try{
	if(new ActiveXObject("ChromeTab.ChromeFrame"))return true}
catch(a){
}
return false}
,i=function(a){
	try{
	var b=document.createElement("style");
	b.setAttribute("type","text/css");
	if(b.styleSheet)b.styleSheet.cssText=a;
	else b.appendChild(document.createTextNode(a));
	var c=document.getElementsByTagName("head")[0];
	c.insertBefore(b,c.firstChild)}
catch(g){
}
}
,j=false,k=false,n=function(){
	if(!j){
	i('.chromeFrameInstallDefaultStyle{
	width:800px;
	height:600px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-400px;
	margin-top:-300px;
}
.chromeFrameOverlayContent{
	position:absolute;
	margin-left:-400px;
	margin-top:-300px;
	left:50%;
	top:50%;
	border:1px solid #93B4D9;
	background-color:white;
	z-index:2001;
}
.chromeFrameOverlayContent iframe{
	width:800px;
	height:600px;
	border:none;
}
.chromeFrameOverlayCloseBar{
	height:1em;
	text-align:right;
	background-color:#CADEF4;
}
.chromeFrameOverlayUnderlay{
	position:absolute;
	width:100%;
	height:100%;
	background-color:white;
	opacity:0.5;
	-moz-opacity:0.5;
	-webkit-opacity:0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter:alpha(opacity=50);
	z-index:2000;
}
');
	j=true}
}
,l=function(){
	if(!k){
	i(".chromeFrameOverlayContent{
	display:none;
}
.chromeFrameOverlayUnderlay{
	display:none;
}
");
	document.cookie="disableGCFCheck=1;
	path=/;
	max-age=31536000000";
	k=true}
}
,o=function(a,b){
	var c=f(b.node);
	a.id=b.id||(c?c.id||getUid(c):"");
	a.style.cssText=" "+(b.cssText||"");
	a.className=b.className||"";
	a.src=b.src||"about:blank";
	c&&c.parentNode.replaceChild(a,c)}
,m=function(a){
	var b=document.createElement("iframe");
	b.setAttribute("frameborder","0");
	b.setAttribute("border","0");
	o(b,a);
	return b}
,p=function(a){
	a.className="chromeFrameInstallDefaultStyle "+(a.className||"");
	a=m(a);
	a.parentNode||document.body.insertBefore(a,document.body.firstChild)}
,q=function(a){
	if(!f("chromeFrameOverlayContent")){
	var b=document.createElement("span");
	b.innerHTML='<div class="chromeFrameOverlayUnderlay"></div><table class="chromeFrameOverlayContent"id="chromeFrameOverlayContent"cellpadding="0" cellspacing="0"><tr class="chromeFrameOverlayCloseBar"><td><button id="chromeFrameCloseButton">close</button></td></tr><tr><td id="chromeFrameIframeHolder"></td></tr></table>';
	for(var c=document.body;
	b.firstChild;
	)c.insertBefore(b.lastChild,c.firstChild);
	a=m(a);
	f("chromeFrameIframeHolder").appendChild(a);
	f("chromeFrameCloseButton").onclick=l}
}
,d={
}
;
	d.check=function(a){
	a=a||{
}
;
	var b=navigator.userAgent,c=/MSIE (\S+);
	Windows NT/,g=false;
	if(c.test(b)){
	if(parseFloat(c.exec(b)[1])<6&&b.indexOf("SV1")<0)g=true}
else g=true;
	if(!g){
	n();
	document.cookie.indexOf("disableGCFCheck=1")>=0&&l();
	b=(document.location.protocol=="https:"?"https:":"http:")+"//www.google.com/chromeframe";
	if(!h()){
	a.onmissing&&a.onmissing();
	a.src=a.url||b;
	b=a.mode||"inline";
	if(!(a.preventPrompt||0))if(b=="inline")p(a);
	else b=="overlay"?q(a):window.open(a.src);
	if(!a.preventInstallDetection)var r=setInterval(function(){
	if(h()){
	a.oninstall&&a.oninstall();
	clearInterval(r);
	window.location=a.destination||window.location}
}
,2E3)}
}
}
;
	d._force=false;
	d._forceValue=false;
	d.isAvailable=h;
	e.CFInstall=d}
}
)(this.ChromeFrameInstallScope||this);

CSS代码(progressbar.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
body{color:#404040;background:#fafafa;}
.container{font:12px '微软雅黑','Lucida Grande',Tahoma,Verdana,sans-serif;margin:100px auto;width:640px;}
.container > div{margin-bottom:20px;}
.progress{height:20px;background:#ebebeb;border-left:1px solid transparent;border-right:1px solid transparent;border-radius:10px;}
.progress > span{position:relative;float:left;margin:0 -1px;min-width:30px;height:18px;line-height:16px;text-align:right;background:#cccccc;border:1px solid;border-color:#bfbfbf #b3b3b3 #9e9e9e;border-radius:10px;background-image:-webkit-linear-gradient(top,#f0f0f0,#dbdbdb 70%,#cccccc);background-image:-moz-linear-gradient(top,#f0f0f0,#dbdbdb 70%,#cccccc);background-image:-o-linear-gradient(top,#f0f0f0,#dbdbdb 70%,#cccccc);background-image:linear-gradient(to bottom,#f0f0f0,#dbdbdb 70%,#cccccc);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);}
.progress > span > span{padding:0 8px;font-size:11px;font-weight:bold;color:#404040;color:rgba(0,0,0,0.7);text-shadow:0 1px rgba(255,255,255,0.4);}
.progress > span:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;height:18px;background:url("../images/progress.png") 0 0 repeat-x;border-radius:10px;}
.progress .green{background:#85c440;border-color:#78b337 #6ba031 #568128;background-image:-webkit-linear-gradient(top,#b7dc8e,#99ce5f 70%,#85c440);background-image:-moz-linear-gradient(top,#b7dc8e,#99ce5f 70%,#85c440);background-image:-o-linear-gradient(top,#b7dc8e,#99ce5f 70%,#85c440);background-image:linear-gradient(to bottom,#b7dc8e,#99ce5f 70%,#85c440);}
.progress .red{background:#db3a27;border-color:#c73321 #b12d1e #8e2418;background-image:-webkit-linear-gradient(top,#ea8a7e,#e15a4a 70%,#db3a27);background-image:-moz-linear-gradient(top,#ea8a7e,#e15a4a 70%,#db3a27);background-image:-o-linear-gradient(top,#ea8a7e,#e15a4a 70%,#db3a27);background-image:linear-gradient(to bottom,#ea8a7e,#e15a4a 70%,#db3a27);}
.progress .orange{background:#f2b63c;border-color:#f0ad24 #eba310 #c5880d;background-image:-webkit-linear-gradient(top,#f8da9c,#f5c462 70%,#f2b63c);background-image:-moz-linear-gradient(top,#f8da9c,#f5c462 70%,#f2b63c);background-image:-o-linear-gradient(top,#f8da9c,#f5c462 70%,#f2b63c);background-image:linear-gradient(to bottom,#f8da9c,#f5c462 70%,#f2b63c);}
.progress .blue{background:#5aaadb;border-color:#459fd6 #3094d2 #277db2;background-image:-webkit-linear-gradient(top,#aed5ed,#7bbbe2 70%,#5aaadb);background-image:-moz-linear-gradient(top,#aed5ed,#7bbbe2 70%,#5aaadb);background-image:-o-linear-gradient(top,#aed5ed,#7bbbe2 70%,#5aaadb);background-image:linear-gradient(to bottom,#aed5ed,#7bbbe2 70%,#5aaadb);}

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