使用jquery放大圖像

Question

我真的不知道如何才能使像這個頁面上的圖像一樣的效果。就像你會看到的那樣，文章有小圖片，但是當用戶點擊圖片時，它會在全幅上放大。有沒有人有想法如何複製這個？

在此先感謝！只要我收到答案，我會req。刪除它，因爲我知道它不顯示任何代碼或任何。

鏈接http://www.klix.ba/sport/nogomet/navijaci-galatasaraya-unistavali-stolice-na-emiratesu/141003042

Answer 1

肯定的：

HTML

<img id="myImage" src="http://www.manifestic.com/images/smpanda.jpg"> 

JQuery的

var resized; 
$('#myImage').click(function(){ 
    if (!resized) { 
     $(this).animate({'width':632,'height':470}, 300); 
     resized = true;  
    } 
    else if (resized) { 
     $(this).animate({'width':283,'height':360}, 300); 
     resized = false;  
    } 

    return false; 
}); 

看看這個JSFIDDLE

Answer 2

直接從該頁面的源代碼：

$('a.resizeimg').click(function(){ 
       if (!resized) { 
        $(this).find("figure").hide(); 
        $(this).parent().animate({'width':632,'height':470}, 300); 
        $(this).find("img").animate({'width':632,'height':470}, 300, function(){ 
         $('a.resizeimg').find("figure").show(); 
         var header = parseInt($("header").css("height")); 
         if(header == 92) { 
          clanakHeight = parseInt($('article.clanak').height())+69-parseInt($(".additional").height()); 
         } 
         else if(header == 51) { 
          clanakHeight = parseInt($('article.clanak').height())+181-parseInt($(".additional").height()); 
         } 
        }); 
        $(this).next("p.opis").animate({'width':622}, 300); 
        $(this).find("figure").css({'width':632,'height':470}); 
        resized = true; 
       } 
       else if (resized) { 
        $(this).find("figure").hide(); 
        $(this).parent().animate({'width':316,'height':235}, 300); 
        $(this).find("img").animate({'width':316,'height':235}, 300,function(){ 
         $('a.resizeimg').find("figure").show(); 
         var header = parseInt($("header").css("height")); 
         if(header == 92) { 
          clanakHeight = parseInt($('article.clanak').height())+69-parseInt($(".additional").height()); 
         } 
         else if(header == 51) { 
          clanakHeight = parseInt($('article.clanak').height())+181-parseInt($(".additional").height()); 
         } 
        }); 
        $(this).find("figure").css({'width':316,'height':235}); 
        $(this).next("p.opis").animate({'width':306}, 300); 
        resized = false;  
       } 

       return false; 
      });