Question

是否可以告诉我如何在带有叠加功能的按钮上显示big或large图像。我正在创建一个图像滑块，用户点击image并显示带叠加的完整图像。我试过这个

https://plnkr.co/edit/7AqAHSSPwZyj7cipXMrq?p=preview

.overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    background-color:black;
    z-index:9999;
    color:white;
}  

$(function() {

  var counter = 0;
  $('#next').click(function() {
    if (counter <  $('.imageBlock').length-1) {
      counter++;
      $('.imageBlock').hide();
      $('.imageBlock').eq(counter).show();
    }
  })
  $('#pre').click(function() {
    if (counter > 0) {
      counter--;
      $('.imageBlock').hide();
      $('.imageBlock').eq(counter).show();
    }
  })

  $('.imageBlock').click(function(){
    $('body html').addClass('overlay')
  })

})

Answer 1

以下是点击图片的示例 - 我们选择src，然后将其添加到隐藏的div（.overlay img），然后显示div。

点击叠加层会再次隐藏它。

希望这是有帮助的

   $('.thumb').on('click', function(){
  $('.overlay img').attr('src', $(this).attr('src'));
  $('.overlay').show();
});

$('.overlay').on('click', function(){
  $('.overlay').hide();
});

.thumb {
  width: 250px;
}
.overlay {
  display: none;
  position: absolute;
  top:0px;
  background: #000;
  width: 100%;
  height: 100vh;
  white-space: nowrap;
    
    text-align: center;
}

.overlay img {
  width: 100%;
  border:5px solid #000;
  vertical-align: middle;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img class="thumb" src="https://images.unsplash.com/photo-1428094479093-8973a318bd76?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=">

<div class="overlay"><span class="helper"></span><img src=""></div>

这是一个小提琴：https://jsfiddle.net/BradChelly/kbode1cx/

Answer 2

如果您想使用图书馆，可以使用prettyPhoto来完成所需的一切。

如果您不想使用库，可以在代码中执行此操作（JS文件的最后一个jQuery事件）：

$('.imageBlock').click(function(){
    $('body').toggleClass('overlay');
    $('.imageBlock').eq(counter).find('.large img').toggle();
})

Answer 3

对于初学者$('body html').addClass('overlay')不起作用，因为它会在html元素中选择一个body元素，但该元素不存在。

我认为你的目标是任何一个类（使其成为跨浏览器）：

$('body,html')

您可以切换课程：

$('body,html').toggleClass('overlay')

然后调整你的CSS。可能是这样的：

.overlay .imageBlock .small img {
display: none;
}
.overlay .imageBlock .large img {
display: block;
}

顺便说一句，如果你只需要img的.small和.large包装器用于叠加功能，那么你就会比所需要的更难......

如何在jquery中显示覆盖完整图像？

3 个答案: