3.進度條
我們提供的服務有:網(wǎng)站設計、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、延壽ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務,是有科學管理、有技術的延壽網(wǎng)站制作公司
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切換
/*左邊點擊事件,調(diào)用go函數(shù)*/
$(".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");
}
});
/*右邊點擊事件,調(diào)用 go函數(shù)*/
$(".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");
}
});
最后寫前面所調(diào)用go函數(shù)
function go(index){
$(".banner_change_box div ul").animate({left:-(wid*index)});
};