成長效果電網館

Question

我想知道是否有任何開源JS庫，在那裏，模仿你可以在以下電網館看到效果：

http://www.lucrezialantana.com/artist-books/filorosso/

當一個用戶點擊縮略圖，它「增長」到全尺寸，而其餘圖像保持不變。

我不知道如何調用這個效果，所以我不知道如何搜索一個模仿它的庫。有任何想法嗎？

在此先感謝

Answer 1

Rohits答案是好的，但你甚至需要jQuery的這個（儘管它更容易）

這是一個純JavaScript/HTML/CSS例子：

//Function to change image size 
 
//We do this by adding or removing the CSS class "small" 
 
function growOnClick(evt) { 
 
    //The click image 
 
    var img = evt.target; 
 
    //If class already contains "small" 
 
    if (img.className.indexOf("small") >= 0) { 
 
    //Remove "small" 
 
    img.className = img.className 
 
     .replace(/small/ig, '') 
 
     .replace(/ /ig, ' '); 
 
    } else { 
 
    //Add small 
 
    img.className += " small"; 
 
    } 
 
} 
 
//Select all "img" tags with the "growOnClick" class 
 
document 
 
    .querySelectorAll("img.growOnClick") 
 
    .forEach(function(img) { 
 
    //For each image, bind "onclick" event to our function 
 
    img.onclick = growOnClick; 
 
    });

img.growOnClick { 
 
    transition: width 2.5s; 
 
    width: 500px; 
 
    cursor: pointer; 
 
} 
 

 
img.growOnClick.small { 
 
    width: 150px; 
 
}

<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso1.jpg" class="growOnClick small" /> 
 
<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso1.jpg" class="growOnClick small" /> 
 
<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso1.jpg" class="growOnClick small" />

Answer 2

可以使用自定義jQuery來做到這一點是這樣的。

$(document).ready(function(){ 
 
$('.ourImages').click(function(){ 
 
\t $(this).height('500px').width('500px'); 
 
}); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso1.jpg" width="200px" class="ourImages" /> 
 
<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso3.jpg" width="200px" class="ourImages" />