如何在頁面加載時全屏顯示圖像

Question

我有上一個堆棧溢出問題的腳本，該腳本有關如何從數組中隨機選擇圖像。

顯示頁面加載時從數組中隨機選擇的圖像的腳本

我想進一步介紹他的想法，並在頁面加載時全屏顯示此圖像。 我在一個網站上工作，並且想到了將圖像用作問候頁面。 頁面加載時在何處會收到全屏高清圖像。 單擊后，此圖像將消失並顯示完整站點。 我不確定如何做到這一點。 有任何想法嗎？

編輯：我不是在尋找直接實現。 關於如何完成此任務的一般想法或jsFiddles。

Answer 1

嘗試使用CSS ，

第一選擇

img {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

第二種選擇

img {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

要了解上述選項，請閱讀完美的整頁背景圖像

我建議您使用完整的整頁背景圖像滑塊來解決問題。 如果可用，請使用它而不會浪費您的時間。

我在http://www.freshdesignweb.com/fullscreen-jquery-slider.html上找到了一個整頁滑塊，其中第一個背景滑塊最適合您。

您也可以轉到https://www.google.co.in/?q=full+background+image+slider以獲得更多圖像滑塊

Answer 2

要在頁面加載中顯示圖像，可以使用$( document ).ready()函數。 在圖片的click()上，您可以顯示該網站。