现在作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内

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("
    
     
      
       
       0
       
");	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跳转页面。