jQuery定義背景動態(tài)切換效果的方法
更新時間:2015年03月23日 12:33:00 作者:work24
這篇文章主要介紹了jQuery定義背景動態(tài)切換效果的方法,實例分析了jQuery操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery定義背景動態(tài)切換效果的方法。分享給大家供大家參考。具體如下:
通過下面的jQuery插件,你可以將圖片放在一個數(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è)計有所幫助。
您可能感興趣的文章:
- Jquery數(shù)字上下滾動動態(tài)切換插件
- Jquery實現(xiàn)動態(tài)切換圖片的方法
- js、jquery圖片動畫、動態(tài)切換示例代碼
- 基于jQuery實現(xiàn)仿百度首頁換膚背景圖片切換代碼
- jQuery關(guān)于導(dǎo)航條背景切換效果實現(xiàn)示例
- jQuery 一個圖片切換的插件
- 一個基于jquery的圖片切換效果
- 基于Jquery實現(xiàn)的一個圖片滾動切換
- jquery 圓形旋轉(zhuǎn)圖片滾動切換效果
- Jquery實現(xiàn)點擊切換圖片并隱藏顯示內(nèi)容(2種方法實現(xiàn))
- JQuery學(xué)習(xí)筆記 實現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果
- jQuery簡單實現(xiàn)banner圖片切換
- jquery動態(tài)切換背景圖片的簡單實現(xiàn)方法
相關(guān)文章
MVC+jQuery.Ajax異步實現(xiàn)增刪改查和分頁
這篇文章主要為大家詳細(xì)介紹了MVC結(jié)合jQuery.Ajax異步實現(xiàn)增刪改查和分頁的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05
jQuery結(jié)合AJAX之在頁面滾動時從服務(wù)器加載數(shù)據(jù)
這篇文章主要介紹了jQuery結(jié)合AJAX之在頁面滾動時從服務(wù)器加載數(shù)據(jù),文中示例服務(wù)器端為C#程序,需要的朋友可以參考下2015-06-06
jQuery 實現(xiàn)自動填充郵箱功能(帶下拉提示)
本文用 jQuery 實現(xiàn)一個用戶輸入字符時出現(xiàn)能夠提示郵箱后綴名的下拉菜單,并且在選擇下拉菜單中的郵箱后綴名后可自動填充未完成的輸入框。2014-10-10

