jquery常用代码--(二)
3.进度条
我们提供的服务有：网站设计、成都网站制作、微信公众号开发、网站优化、网站认证、延寿ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的延寿网站制作公司
1.横向进度条带固定百分比
function SetProgress(progress) {
if (progress) {
$(".inner").css("width", String(progress) + "%"); //控制#loading div宽度 $(".inner").html(String(progress) + "%"); //显示百分比
}
}
var i = 0;
function doProgress() {
if (i >80) { return; }
if (i <= 80) {
setTimeout("doProgress()", 50);
SetProgress(i);
i++; }
}
$(document).ready(function() { doProgress();
});
2.横向进度条的书写，仅仅色块宽度不同
function doProgress(classname,color,widthmax) {
$('.'+classname).animate({width:widthmax,background:color},500);
}
$(function(){
doProgress('list_blue','#56A8E7',30);
doProgress('list_red','#F1705C',40);
doProgress('list_orange','#FDAA29',50);
doProgress('list_green','#8FC842',20);
});
4. Banner切换
/*左边点击事件，调用go函数*/
$(".pre").click(function(){
if(curr>=max-1){
return false;
}
else if(curr==max-2){
$(".pre").removeClass("cur");
go(curr+1);
$('.text_banner .text_ban').addClass('display_none');
$('.text_banner .text_ban').eq(curr+1).removeClass('display_none');
curr++;
$(".next").addClass("cur");
}
else {
$(".pre").addClass("cur");
go(curr+1);
$('.text_banner .text_ban').addClass('display_none');
$('.text_banner .text_ban').eq(curr+1).removeClass('display_none');
curr++;
$(".next").addClass("cur");
}
});
/*右边点击事件，调用 go函数*/
$(".next").click(function(){
if(curr<=0) {
return false;
}
else if(curr==1) {
$(".next").removeClass("cur");
go(curr-1);
$('.text_banner .text_ban').addClass('display_none');
$('.text_banner .text_ban').eq(curr-1).removeClass('display_none');
curr--;
$(".pre").addClass("cur");
}
else {
$(".next").addClass("cur");
go(curr-1);$('.text_banner .text_ban').addClass('display_none');
$('.text_banner .text_ban').eq(curr-1).removeClass('display_none');
curr--;$(".pre").addClass("cur");
}
});
最后写前面所调用go函数
function go(index){
$(".banner_change_box div ul").animate({left:-(wid*index)});
};
当前名称：jquery常用代码--(二)
新闻来源：http://scjbc.cn/article/gecgjs.html
