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程序设计有所帮助。