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)});
};
本文出自 “旅行者唯一的等待” 博客，请务必保留此出处http://sunnyyeyuzhu.blog.51cto.com/6793234/1562347
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
