jquery - How to use jQuery to display the real images when I click on the temporary images at 480px screenwide?

Question

I have created a responsive web site which contains some images. I need these images to be replaced by temporary images when the website displays at 480 pixel screen wide or less.

Then if the user likes to see the image, he or she just clicks on the temporary image in order to show the real one.

How could I do that by using jquery?

Thanks a lot.

Answer 1

你是说像这个？我在这里做了一个DEMO http://jsfiddle.net/yyene/wtFXD/

首先，将结果面板的大小调整为大于 480 像素，然后看，没有显示临时图像。

然后，将结果面板的大小调整为小于 480px，您可以看到临时图像，单击并查看大图。

HTML

<img class="thumb" src="http://www.hdwallpapers.in/thumbs/wind_capture-t1.jpg" width="270" height="169" title="Click to enlarge." target="http://www.hdwallpapers.in/walls/wind_capture-wide.jpg" />

<img class="thumb" src="http://www.hdwallpapers.in/thumbs/hamann_range_rover_vogue_2013_widebody_mystere-t1.jpg" width="270" height="169" title="Click to enlarge." target="http://www.hdwallpapers.in/walls/hamann_range_rover_vogue_2013_widebody_mystere-wide.jpg" />

CSS

.thumb {
    float:left;
    display:none;
    padding:1px;
    border:1px solid #dfdfdf;    
}
.big{
    float:left;
    width:480px;
    height:300px;
    padding:1px;
    border:1px solid #dfdfdf; 
}

查询

$(document).ready(function(){
    if($(document).width() <= 480){
        $(".thumb").show();
        $(".thumb").click(function() {
            $(this).removeClass('thumb').addClass('big');
            $(this).attr("src").replace($(this).attr('target'));
        });
    }
});