褪色背景圖片

我正在使用一個簡單的腳本來每隔X秒更改我的網站的背景圖片。我想要做的是包含某種淡入淡出的動畫或從一個圖像到下一個圖像的過渡。達到此目的的最佳方法是什麼？褪色背景圖片

我不是很擅長Javascript，所以請耐心等待。 :)

<script type="text/javascript"> 
    var images = ['bg1.png', 'bg2.png', 'bg3.png']; 
    var curImage = 0; 
    function switchImage() 
    { 
     curImage = (curImage + 1) % images.length 
     document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')' 
    } 
    window.setInterval(switchImage, 5000); 
</script>

我看了個遍和不明白請，請有人給我一個工作的代碼，所以我可以複製和粘貼，擺脫這惱人的工作。這裏的例子http://preferredmerchantservices.net/

來源

2011-09-01 Cory

其實......你應該使用jQuery。我知道......一個簡單功能的大型圖書館，但基於個人經驗，它不會是一個「簡單」功能。另外，jQuery在後臺處理所有跨瀏覽器兼容性，這非常好。（哦，並且也很容易使用jQuery的轉換方法）。 –

嘗試設置間隔的圖像不透明度或使用Jquerry將更容易褪色。 –

似乎沒有人使用老式的js腳本來實現這樣的動畫了。我建議你使用jQuery或其他JavaScript庫，它們基本上是瀏覽器JavaScript功能的抽象層。

此外，您還可以找到很多示例，插件等，以瞭解您所提到的過渡效果。

過渡效果的插件：http://malsup.com/jquery/cycle/
jQuery的網站，這是很容易的，並採取了幾天我學習吧：http:///www.jquery.com

希望它能幫助。

來源

2011-09-01 18:39:31 Tarik

做出同樣尺寸的DIV爲你的形象
設置你的圖像作爲CSS背景
把第二個「前景」的形象在你的DIV零不透明
淡出第二圖像
交換的形象 - >使其成爲DIV
設置前景圖像的不透明度的CSS背景零
交換爲n個前景圖像轉一個
重複

來源

2011-09-01 18:40:50

萬一你需要重寫的jQuery的代碼。這裏有：

<script type="text/javascript"> 
    var images = ['bg1.png', 'bg2.png', 'bg3.png']; 
    var curImage = 0; 
    var timer; 
    function switchImage() { 
     $('body').css({'backgroundImage':'url(images/' + images[curImage] + ')'}; 
     curImage == images.length? curImage = 0; curImage++; 
     clearInterval(timer); 
     timer = setInterval(switchImage, 5000);   
    } 
    timer = setInterval(switchImage, 5000);   
</script>

我想指出，這不會淡入/出背景圖像，但是。要做到這一點，你可以使用一個容器作爲背景圖片。可能調整大小的東西。

// Resize Handler 
$(window).resize(function() { 
    resizePages(); 
}); 

function resizePages() { 

    var width = $(window).width(); 
    var height = $(window).height(); 

    $('.backgroundContainer').css({'width': width}); 

    /* 
     .contentWrapper would be where all your page's content is placed 
     .backgroundContainer is a class for a div placed out side teh contentWrapper 
     It would have a lower z-index than .contentWrapper but higher than body. 
    */ 


    /* 
     This makes sure that the background image is the same height as 
     either the windows of the .contentWrapper (whichever is larger) 
    */ 
    if (height > $('.contentWrapper').height()){ 
     $('.backgroundContainer').css({'height': height}); 
    } else { 
     $('.backgroundContainer').css({'height': $('.contentWrapper').height()}); 
    } 
}

然後，您可以調整切換代碼以淡入轉場之間的背景。

來源

2011-09-01 18:51:46

褪色背景圖片

回答

相關問題