work24 通过本文主要向大家介绍了jQuery,定义,背景,动态,切换,效果,方法等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实例讲述了jQuery定义背景动态切换效果的方法。分享给大家供大家参考。具体如下：
通过下面的jQuery插件，你可以将图片放在一个数组里，然后告诉jQuery图片需要在什么地方背景轮换
(function($){
var defaultSettings;
var divfg, divbg;
var fadeInterval;
var fqTimer;
var currImg = 0;
var displImg = 0;
var running = false;
// Setup settings and initialize the plugin
$.fn.bgFade = function(settings, callback){
defaultSettings = $.extend({
frequency: 5000,
speed: 10,
images: [],
position: "center center",
fgz: 1,
bgz: 0
}, settings);
var c = 0;
$(this).each(function(){
if(c == 0) divfg = $(this);
if(c == 1) divbg = $(this);
c++;
});
setBackgrounds();
if(typeof callback == "function"){
callback();
}
return this;
};
// Start the fadder
$.fn.start = function(){
fqTimer = setTimeout(function(){
nextFade()},defaultSettings.frequency
);
running = true;
return this;
};
// Stop the fadder
$.fn.stop = function(){
clearInterval(fadeInterval);
clearTimeout(fqTimer);
running = false;
return this;
}
// Get the current image info {array id, image url}
$.current = function(){
return {pos: displImg, url: defaultSettings.images[displImg]}
}
// Set the first two backgrounds
function setBackgrounds(){
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;
}
// Set the next background after a fade completes
function setNextBackground(){
next = arrayNext();
image = defaultSettings.images[next];
divbg.css({
backgroundImage: "url('"+image+"')"
});
setTimeout(function(){nextFade()}, defaultSettings.frequency);
}
// Run a fade
function nextFade(){
fadeInterval = setInterval(function(){fadeIt()}, 30);
}
// Decrement the opacity of the div
function fadeIt(){
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();
}
}
// Get the next item in the array
function arrayNext(){
var next = currImg + 1;
if(next >= defaultSettings.images.length){
next = 0;
}
currImg = next;
return next;
}
// Get the current item in the array
function arrayCurrent(){
var cur = currImg - 1;
if(cur < 0)
cur = defaultSettings.images.length - 1;
return cur;
}
})(jQuery);
希望本文所述对大家的jQuery程序设计有所帮助。