jquery仿flash引導頁面進度條加載特效

如今做flash網站的是愈來愈少了，但flash的效果不少都是獨一無二的，用其餘方法很難實現，今天跟你們分享個由jquery製做的網站引導頁面加載特效，加載完頁面後跳轉到指定的頁面。

jquery仿flash引導頁面進度條加載特效使用說明

1.加入進度條CSS樣式

#pageLoad{background:#0f1923;position:fixed;_position:absolute;left:0;right:0;top:0;bottom:0;z-index:999;}
#pageLoad div{text-align:center;height:150px;width:350px;padding-left:30px;position:absolute;}
#pageLoad a,#pageLoad samp{display:block;background:url(images/loadbf.jpg) no-repeat center 0;height:60px;width:350px;position:absolute;z-index:0;left:0;top:0;}
#pageLoad p{background:#0f1923;width:2px;position:absolute;left:0;top:0;height:60px;z-index:5;}
#pageLoad samp{z-index:1;overflow:hidden;width:0;}
#pageLoad samp em{display:block;background:url(images/loadaf.jpg) no-repeat center 0;height:60px;width:350px;}
#pageLoad span{display:block;text-align:center;color:#fff;font-weight:bold;font-family:Arial;height:24px;font-size:24px;width:340px;padding-right:10px;position:relative;top:80px;}

2.加載內容寫在JS內

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jsctrlc.js" type="text/javascript"></script>

3.js代碼以下

$(function(){
	var beforeDate = new Date();
	//頁面加載
	var $window = $(window),
		$doc = $(document),
		$body = $("body"),
	    winWidth = $window.width(),
		docWidth = $doc.width(),
		docHeight = $doc.height(),
		winHeight = $window.height(),	
		speed = 250;
	$body.append("<div  id=\"pageLoad\" style=\"width:"+ docWidth +"px;height:"+ docHeight +"px;\"><div style=\"left:"+ (winWidth-350)*0.5 +"px;top:"+ (winHeight-150)*0.5 +"px;\"><a href=\"http://www.jsctrlc.com\"></a><samp><em></em></samp><span>0</span><p></p></div></div>");

	var afterDate = new Date(),
	    pagePreLoad = (afterDate - beforeDate),
	    time = 10/pagePreLoad,
		preImgLen = 35/pagePreLoad,
		n = 0,
		m = 0,
		play = setInterval(function(){
			if(Number(n) >= 100 && Number(m) >= 350) { 
				clearInterval(play); 
				n = 100;
				m = 350;			
				//頁面加載完畢後執行(主線)
				setTimeout(function(){
					$("#pageLoad").fadeOut(400,function(){
						$(this).remove();
						location.href="http://www.jsctrlc.com";
					});		
			
				},200);
			};		
			$("#pageLoad").find("samp").css("width",m);		
			$("#pageLoad").find("span").text(Math.floor(n)+"%");
			n += time;
			m += preImgLen;
		},100);
});

根據頁面的大小設置加載圖片的位置，加載完內容後經過location.href跳轉頁面。