[英]Using jQuery to fade in a new image
以下是充當背景的圖像元素。 該位置是絕對位置,並且z-index值也很低,因此它位於其余內容的后面。
<img src="day-sky.jpg" id="background" />
下面的秒僅指分鍾的秒數。 這只是出於測試目的,但是如果秒數小於30,我想有一張背景圖像,如果秒數大於30,則要有另一幅背景圖像。如果可能的話,過渡將是很好的淡入下一張圖像。
我一直在尋找實現此目的的方法,但一直沒有想出一個好的方法來做到這一點。 有什么想法嗎?
function changeBackground() {
if (secs > 30) {
//have one background
}
else {
//have a different background
}
}
您可能需要使用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)
})
這是一個工作示例: 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);
});
})();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.