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;}

$(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跳转页面。

特效转载自jsctrlc特效网