jquery常用代码--(二)
3.进度条
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)});
};
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
