Question

我有兴趣知道是否有任何开源JS库可以模仿您在以下网格库中看到的效果：

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

当用户点击缩略图时，它会增长＆＃34;到完整尺寸，而其余图像保持不变。

我不知道如何调用这种效果，因此我不知道如何搜索模仿它的lib。有什么想法吗？

提前致谢

Answer 1

您可以使用自定义jquery执行此操作。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 2

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" />

成长效果网格库

2 个答案: