這篇文章主要介紹了jQuery定義背景動態(tài)切換效果的方法,實(shí)例分析了jQuery操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery定義背景動態(tài)切換效果的方法。分享給大家供大家參考。具體如下：

通過下面的jQuery插件，你可以將圖片放在一個(gè)數(shù)組里，然后告訴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程序設(shè)計(jì)有所幫助。

更多信息請查看IT技術(shù)專欄