最近更新
阅读排行
关注本站
JS制作加载条跳转效果
阅读：3347 次 编辑日期：2013-12-17
目录：
概述：
在日常工作中，因为某种特定的需要，在进入页面之前会有一段加载条，加载到达100%的时候跳转页面。今天我们来分析一下这个JS效果。
制作加载条的原因：
大致有两种原因：
（1）为了达到某种展示效果，例如让用户读完某条信息之后跳转等等。
（2）页面体积比较大，为了达到更好的展示效果，为加载页面争取时间。
（1）为了达到某种展示效果，例如让用户读完某条信息之后跳转等等。
（2）页面体积比较大，为了达到更好的展示效果，为加载页面争取时间。
如何编写JS代码：
这里我只说一个方法，希望大家举一反三。其实主要用到的就是jQuery的animate方法。
CSS:
.wrap{
width:300px; height:20px;
background:#CFF; color:#000;
margin-top:50px;
}
.wrap2{
width:300px; height:20px;
background:#CFF;color:#000;
}
.wrap3{
width:300px; height:200px;
background:#ccc;color:#000;
display:none;
}
.wrap4{
width:10px;height:10px;
background: #F00;color:#000;
position:absolute;top:0; left:0;
}
.tiao{width:2px; height:20px; background:#F00;}
HTML:
JS:
$(document).ready(function(){
$("#a").animate({width:300},{duration:5000,step:function(uw3c){
var p=Math.round((uw3c/300)*100);
$("#b").text(p+"%");
$("#c").css("margin-left",uw3c)
if(p==100){
location.href="http://www.uw3c.com"
}
}
})
})
