javascript - 模态滑动效果

Question

我一直在尝试获得具有滑动效果的模态，并在悬停时放大，但还没有运气，但我设法达到了点击图片时弹出图片的程度。这是一个类似的网站http://www.garysheng.com/(照片部分)。请参阅 Codepen https://codepen.io/rranssa/pen/LYVyooe .

Answer 1

您可以使用lightGallery

很简单，不需要你自己实现，您需要做的就是在documentation中添加提到的链接然后像下面这样使用它:

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
</div>


<script type="text/javascript">
    $(document).ready(function() {
        $("#lightgallery").lightGallery(); 
    });
</script>

您可以通过向其传递对象来启用和禁用选项，如下所示:

$('#lightgallery').lightGallery({
    mode: 'lg-fade',
    cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)'
    ......
}); 

所有选项均可在以下链接中找到: https://sachinchoolur.github.io/lightGallery/docs/api.html