在480像素或更少，更改圖像，當點擊恢復到舊圖像

我完全不熟悉JQuery，仍在學習，所以我需要一些幫助。我有一個帶有橫幅的網頁，當屏幕大小爲480px或更小時，它將用臨時圖像替換橫幅以使移動用戶更快。所以很好。但現在到了這個問題。當用戶點擊這個臨時圖像時，它應該恢復到舊圖像。在這種情況下，橫幅。我怎樣才能做到這一點？在480像素或更少，更改圖像，當點擊恢復到舊圖像

我迄今爲止代碼：

$("document").ready(function() { 
    if ($(window).width() <= 480) { 
      $("#img").attr("src", "temp_image.jpg"); 
    } 
});

和HTML：

<div id="banner"> 
    <a href="#"><img id="img" src="banner.jpg" alt="banner" /></a> 
</div>

來源

2013-03-06 user1959901

要完全按照您的要求進行操作，只需將一個點擊處理程序附加到img上，然後以與文檔加載相同的方式替換圖像。 E.G

$('#img').click(function(){ 
    $("#img").attr("src", "banner.jpg"); 
    //following line to unbind the click handler so it doesnt keep firing (even though it wont do anything) 
    $('#img').unbind(); 
});

但是我認爲Sergios的回答對於您想要的更好。

有一點要記住。你說它會'爲移動用戶提高速度'，但在這一點上，橫幅圖像已經被加載，你只是用另一個替換它，當然，當你加載兩個圖像而不是一個圖像時，這實際上會讓它變慢。從外觀上看，它會更好看，但我認爲它不會讓它變得更快。如果我的棒有錯，請糾正我！

來源

2013-03-06 10:59:19

啊，Sergios的回答消失了。也許它不起作用？：P我應該指出，這可能不是最好的解決方案，但它應該做你想做的。 – 2013-03-06 11:00:28

謝謝！這工作輝煌！那麼，這個想法是，當一個移動用戶訪問該網站時，會出現一個圖形不太好的圖像，加載速度更快，如果他們想看橫幅或任何他們可以點擊的橫幅，橫幅就會出現。 – user1959901 2013-03-06 11:06:43

夠公平的，如果你喜歡我的回答或任何其他人，請記得加快他們的速度，接受你認爲最有用的那個！我們在StackOverfow上的人是自我驅動的生物...... – 2013-03-06 11:11:15

您的代碼看起來不錯，我覺得只是刪除「從各地文檔中您的文檔準備語句使你的代碼工作 - 爲了恢復圖像，你可以使用沿線的東西

$(document).on('click','#img',function() { 
    if($(this).attr('src') === 'temp.jpg') 
    { 
     $(this).attr('src','mainimg.jpg') 
    } 
});

但是我不確定是否還想將它恢復爲較小的圖像，如果img元素被點擊離開？

來源

2013-03-06 10:54:08

要更改圖像在480px工作得很好。我只想知道如何製作，以便當用戶點擊臨時圖像時，它將恢復到標題。 – user1959901 2013-03-06 11:00:32

是的抱歉，我沒有完全理解你的問題，我已經編輯了我的答案，應該工作。 – 2013-03-06 11:05:53

您可以將HTML改變一點點：

<div id="banner"> 
    <a href="#"><img id="img" src="banner.jpg" alt="banner" data-big="banner.jpg" data-small="test_image.jpg"/></a> 
</div>

，並導致JS可能會被那種以下（只是爲了避免硬編碼的鏈接）：

$("document").ready(function() { 
    if ($(window).width() <= 480) { 
      $("#img").attr("src", $("#img").data("small")); 
    } 

    $("#img").on("click", function() { 
     var img = $("#img"); 
     if (img.attr("src") != img.data('big') { 
      img.attr("src") = img.data('big'); 
     } 
    }); 
});

還原圖片src回小尺寸取決於你想如何處理它，不知道現在:)

來源

2013-03-06 11:01:11 Sergio

在480像素或更少，更改圖像，當點擊恢復到舊圖像

回答

相關問題