jQuery定义背景动态切换效果的方法
本文实例讲述了jQuery定义背景动态切换效果的方法。分享给大家供大家参考。具体如下：
通过下面的jQuery插件，你可以将图片放在一个数组里，然后告诉jQuery图片需要在什么地方背景轮换
(function($){
vardefaultSettings;
vardivfg,divbg;
varfadeInterval;
varfqTimer;
varcurrImg=0;
vardisplImg=0;
varrunning=false;
//Setupsettingsandinitializetheplugin
$.fn.bgFade=function(settings,callback){
defaultSettings=$.extend({
frequency:5000,
speed:10,
images:[],
position:"centercenter",
fgz:1,
bgz:0
},settings);
varc=0;
$(this).each(function(){
if(c==0)divfg=$(this);
if(c==1)divbg=$(this);
c++;
});
setBackgrounds();
if(typeofcallback=="function"){
callback();
}
returnthis;
};
//Startthefadder
$.fn.start=function(){
fqTimer=setTimeout(function(){
nextFade()},defaultSettings.frequency
);
running=true;
returnthis;
};
//Stopthefadder
$.fn.stop=function(){
clearInterval(fadeInterval);
clearTimeout(fqTimer);
running=false;
returnthis;
}
//Getthecurrentimageinfo{arrayid,imageurl}
$.current=function(){
return{pos:displImg,url:defaultSettings.images[displImg]}
}
//Setthefirsttwobackgrounds
functionsetBackgrounds(){
image1=defaultSettings.images[0];
image2=defaultSettings.images[1];
divfg.css({
backgroundImage:"url('"+image1+"')",
zIndex:defaultSettings.fgz,
backgroundPosition:defaultSettings.postion
});
divbg.css({
backgroundImage:"url('"+image2+"')",
zIndex:defaultSettings.bgz,
backgroundPosition:defaultSettings.postion
});
currImg=1;
displImg=0;
}
//Setthenextbackgroundafterafadecompletes
functionsetNextBackground(){
next=arrayNext();
image=defaultSettings.images[next];
divbg.css({
backgroundImage:"url('"+image+"')"
});
setTimeout(function(){nextFade()},defaultSettings.frequency);
}
//Runafade
functionnextFade(){
fadeInterval=setInterval(function(){fadeIt()},30);
}
//Decrementtheopacityofthediv
functionfadeIt(){
if(divfg.css("opacity")==''){
op=1;
}else{
op=divfg.css("opacity");
}
op-=((1000*defaultSettings.speed)/30)*0.0001;
divfg.css("opacity",op);
if(op<=0){
bg=divbg;
bgimg=divbg.css("background-image");
divfg.css("opacity","1");
divfg.css("background-image",bgimg);
clearInterval(fadeInterval);
setNextBackground();
displImg=arrayCurrent();
}
}
//Getthenextiteminthearray
functionarrayNext(){
varnext=currImg+1;
if(next>=defaultSettings.images.length){
next=0;
}
currImg=next;
returnnext;
}
//Getthecurrentiteminthearray
functionarrayCurrent(){
varcur=currImg-1;
if(cur<0)
cur=defaultSettings.images.length-1;
returncur;
}
})(jQuery);
希望本文所述对大家的jQuery程序设计有所帮助。