jquery仿flash引导页面进度条加载特效 博客分类： jquery 进度条引导页

现在作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跳转页面。

特效来源：http://www.jsctrlc.com/texiao/250.html