響應網站 - 基於瀏覽器窗口大小的不同圖像

我使用html5，css3和jquery創建響應式網站。我有一個想法，我真的很想實施，但我很想找到一種方法來實現。任何幫助將不勝感激/投票。響應網站 - 基於瀏覽器窗口大小的不同圖像

我想根據當前瀏覽器大小在我的網頁上顯示特定圖像，具體取決於。然後。只要瀏覽器窗口調整了幾個像素的大小，我就希望該圖像被替換爲不同的圖像。向右拖動右邊窗口邊緣。所以在某種程度上，它會根據瀏覽器大小生成一個圖像序列動畫。

_ _ _ _ _ _ _ _ _ _ _ 
|     /
|     \ 
|     / <--- 
|     \ 
|    X / <--- 
|     \ 
|_ _ _ _ _ _ _ _ _ _/

E.g. Page width: 940px 

_ _ _ _ _ _ _ _ _ _ 
|    /
|     \ 
|    / <--- 
|     \ 
|    Y / <--- 
|     \ 
|_ _ _ _ _ _ _ _ _/

E.g. Page width: 930px

在上面的例子中，'X'表示一個圖像，'Y'表示另一個圖像，等等。例如，對於每10個像素窗口變小的情況，一個新的圖像就會出現在它的位置上。

問題：

什麼是執行這樣的事情的最好方法，而無需使用閃光燈？有沒有更好的方式來做這樣的'基於頁面寬度的動畫'？

所有的評論都非常感謝。

謝謝。

來源

2013-11-27 Alex

的JavaScript可能會在這裏你的朋友 – Adsy2010

使用CSS媒體查詢和背景圖像，例如

<div class="dynamic-image"></div>

和CSS

.dynamic-image { 
    background: url(smallest-screen-size-image.png) ... ; 
    /* and any other styles required, maybe even a nice transition */ 
    transition: all 0.15s linear; 
} 

@media (min-width: 930px) { 
    .dynamic-image { 
     background-image: url(Y.png); 
    } 
} 

@media (min-width: 940px) { 
    .dynamic-image { 
     background-image: url(X.png); 
    } 
} 

/* and so on */

這裏演示 - http://jsfiddle.net/gPtjz/

來源

2013-11-27 23:56:19 Phil

嗨菲爾，謝謝你的回答。我認爲這與我所尋找的最接近。我想使用許多獨立的圖像，我認爲大約60，對每個人來說，創建獨立的@media查詢會是'壞編碼'嗎？ – Alex

@Alex您只有儘可能多的媒體查詢*停止點*（即屏幕寬度）。您可以根據需要將各種樣式加載到每個「@ media」塊中。雖然60似乎有點顆粒狀對我來說，這應該只是罰款 – Phil

@Alex我添加了一個演示了一些不錯的過渡，所以你可以看到你可以通過CSS單獨實現 – Phil

隨着純CSS3你可以嘗試像

@media all and (min-width: 1440x) { 
    body { 
    background: url(img1); 
    } 
} 

@media all and (max-width: 1440px) and (min-width: 1024px) { 
    body { 
    background: url(img2); 
    } 
} 

@media all and (max-width: 1024px) { 
    body { 
    background: url(img3); 
    } 
}

它看起來有點太冗長，但它是一個開始。我會轉而使用引導程序來使用它的響應類，而不是從頭開始。

來源

2013-11-27 23:54:15 amenadiel

感謝您的評論和代碼。我目前使用'Skeleton'網格。我想要多張圖片（小圖片，也許在右下角）。例如，使用60個單獨的媒體查詢以及60個圖像去解決這個問題是一個可能的解決方案？或者那是愚蠢的？ – Alex

最好的辦法是使用媒體查詢。儘管如此，這取決於您想要使用多少圖片來確定最佳解決方案。

來源

2013-11-27 23:59:35 leaksterrr

感謝您的評論。我想過使用媒體查詢，但我想使用許多圖像（大約60？）來製作一種動畫。 – Alex

這裏的a link to an example在jsFiddle中使用jQuery/JavaScript。

JS：

$(window).resize(function() { 
    var viewportWidth = $(window).width(); 
    console.log(viewportWidth); 
    $("#imageChanger").attr("src", viewportWidth + ".jpg"); 
    $("#imageDescription").html(viewportWidth + ".jpg"); 
});

HTML：

<div id="imageDescription">The filename will appear here</div> 
<div ><img id="imageChanger" src="1.jpg" width="900" height="300"></div>

來源

2013-11-28 00:16:06

年齡Crystl這真棒謝謝！有沒有辦法讓它在步驟上升/下降？例如10px的++？ – Alex

當然，你可以做一些[像這樣]（http://jsfiddle.net/spaceagecrystal/tm9Y6/2/），但你需要添加一些來回/上下的條件。 –

對不起，我的意思是饋入的圖像數字。目前有像素數量一樣多的圖像。我希望它爲瀏覽器調整大小的每10像素選擇一個圖像。所以，1.JPG將顯示在990px寬度，在寬度980px等2.JPG – Alex

響應網站 - 基於瀏覽器窗口大小的不同圖像

回答

相關問題