使用jQuery在新的圖像

下面淡出是作爲背景圖像元素。這個位置是絕對的，它也有一個低z-索引，所以它保持在其餘的內容之後。使用jQuery在新的圖像

<img src="day-sky.jpg" id="background" />

下面的secs指的是一分鐘內的秒數。這只是用於測試目的，但我想有一個背景圖片，如果秒< 30和不同的一個，如果是大於30.如果可能的過渡將是一個不錯的漸漸到下一個圖像。

我一直在尋找周圍的方法來做到這一點，但還沒有想出了一個好辦法做到這一點。有什麼想法嗎？

function changeBackground() { 

if (secs > 30) { 
    //have one background 
} 
else { 
    //have a different background 
    } 
}

來源

2012-11-09 joshft91

的位置在同一個地方的另一個形象，具有較低的z索引，然後使用'$（「＃背景」） .fadeOut（）'。這並不完整，但這是一個開始。 – Archer

你想使這個圖像切換隻有一次？或每30秒交換一次圖片？ – LorDex

@LorDex每三十秒理想。將來它將用於查看一天中的小時並根據它設置背景。 – joshft91

您可能需要使用setInterval()功能定義按您的要求每一個時間戳後更改背景。

setInterval(changebackground, timeout);runs the code/function once after the timeout.

$(function() { 
    setInterval(function() { 
     var bg = ["#000","#FF0", "#909"] 
     var rep= Math.floor(Math.random() *3); 
       $("body").css("background",bg[rep]) 
    }, 3000) 
    })

來源

2012-11-09 17:13:33 defau1t

感謝您的回覆。我一直在試圖弄清楚，如果使用setInterval將是一條路。我有一個基本的時鐘設置，計算秒數 - 如果秒數> 30，那麼有一個背景，否則有一個不同的背景。 – joshft91

這裏有一個工作示例：http://jsfiddle.net/PKqGk/

var imgs = [ 
     "http://placehold.it/1920x1080/&text=1", 
     "http://placehold.it/1920x1080/&text=2", 
     "http://placehold.it/1920x1080/&text=3", 
     "http://placehold.it/1920x1080/&text=4", 
     "http://placehold.it/1920x1080/&text=5",  
     "http://placehold.it/1920x1080/&text=6" 
    ], 
    ind = 0, 
    dur = 10 * 1000; // ten seconds 
(function imgSlide(){ 

    var img = ind % 2 ? $('#imageOne') : $('#imageTwo'), 
     hid = ind % 2 ? $('#imageTwo') : $('#imageOne'); 

    console.log(img, hid); 

    img.fadeOut("slow", function(){ 
     hid.fadeIn("slow").css('margin-left', -hid.width()/2); 
     if (++ind == imgs.length) ind = 0; 
     img.attr('src', imgs[ind]); 
     setTimeout(imgSlide, dur); 
    }); 
})();

來源

2012-11-09 18:14:54 Shmiddty

使用jQuery在新的圖像

回答

相關問題