Question

我正试图在image click全屏显示图像。换句话说，点击图像将以全屏显示

我试过这样但没有工作

$(".imageBlock").click(function () {
    $('.imageBlock').css({'width':'100%','height':'100%','z-index':'9999'})
});

https://jsbin.com/hayalobixo/1/edit?html,css,js,output

$(function() {

  var counter = 0;
  $('.currentPage').text(counter+1);
  $('#pre').prop('disabled', true);

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

  $('#next, #pre').click(function() {
    if (counter == 0) {
      $('#pre').prop('disabled', true);
    } else if (counter == 4) {
      $('#next').prop('disabled', true);
    } else {
      $('#pre').prop('disabled', false);
      $('#next').prop('disabled', false);
    }
  })

  $(".imageBlock").click(function () {
    $('.imageBlock').css({'width':'100%','height':'100%','z-index':'9999'})
});

})

Answer 1

CSS：

div.imageBlock.full{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

JS：

$(".imageBlock").click(function () {
    $('.imageBlock').addClass("full");
});

Answer 2

您可以使用 - div作为绝对定位

$(function() {

  $(".imageBlock").click(function () {
    $(this).css({'width':'100%','height':'100%','z-index':'9999','position':'absolute'})
});

https://jsbin.com/kowogukave/edit?html,css,js,console,output

为什么图像不能全屏显示？

2 个答案: