Question

我试图建立一个摄影网站，当用户点击照片时，他们会看到完整尺寸的图像。我如何将CSS链接到JavaScript？我无法更改原始图像的格式。我的想法是在JavaScript中创建一个类，但我不知道该怎么做。

请帮忙！谢谢！

＆＃13;

jQuery(function($) {
  $('.image1').click(function() {
    var img= $(this).attr("src");
    var appear_image = "<div id='appear_image_div' onclick='closeImage()'></div>";
    appear_image = appear_image.concat("<img id='appear_image' src='"+img+"'/>");
    appear_image = appear_image.concat("<img id='close_image' onClick='closeImage()' src='close.png'/>");
    $('body').append(appear_image);

  });
});

function closeImage () {
  $('#appear_image_div').remove();
  $('#appear_image').remove();
  $('close_image').remove ();
}

＆＃13;

imagefull {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

＆＃13;

<div class="item"><p class="gallerycaption">Venice, Italy<br />July 2017</p>
      <img src="media\photos_2\portraits\thumbnails\t_italy_1.jpg" alt="Venice, Italy, July 2017" class="image1"/></div>

＆＃13;

What I'm trying to do

Answer 1

这是一个简单的演示，根据您的代码，在单击图像时打开的叠加，然后在点击时关闭。

它使用事件委派（.on()）来标识容器内.image项的所有链接（.images）。它打开一个叠加层，并使用.one()附加一次性事件处理程序来关闭模态。

我还使用标记（modalOpen）来防止在单击图像时打开多个模型。

＆＃13;

jQuery(function($) {
  var modalOpen = false;

  $('.images').on('click', '.image', function() {
    var $this = $(this);

    if (modalOpen) return;

    modalOpen = true;

    var img = $(this).attr("src");
    var appear_image = $("<div id='appear_image_div' class='imagefull'></div>");
    appear_image.append("<img id='appear_image' src='" + img + "'/>");
    appear_image.append("<img id='close_image' src='close.png'/>");
    $('body').append(appear_image);

    $('#appear_image_div').click(function() {
      modalOpen = false;

      $(this).remove();
    });
  });

});

＆＃13;

.imagefull {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}

.item {
  display: inline-block;
  width: 25%;
}

.image {
  width: 100%;
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
  <div class="item">
    <p class="gallerycaption">Venice, Italy<br />July 2017</p>
    <img src="http://lorempixel.com/400/200/" alt="Venice, Italy, July 2017" class="image" />
  </div>
  
  <div class="item">
    <p class="gallerycaption">Venice, Italy<br />July 2017</p>
    <img src="http://lorempixel.com/400/201/" alt="Venice, Italy, July 2017" class="image" />
  </div>
</div>

＆＃13;

Answer 2

如果你想建立一个实时网站，我建议你使用像this这样的东西，不需要重新发明轮子，有很多免费的jquery插件，它们看起来也很棒。

Answer 3

您可以在此问题中找到课程创建代码示例：How to dynamically create CSS class in JavaScript and apply?

但其他方法是使用:active CSS伪类或onclick HTML事件，例如：

：活性：

:active { *link to image file*; }

的onclick：

*image_element*.onclick = function-for-image-view;

如果您想看其他操作技巧，请查看this page。

使用类将javaScript代码链接到CSS？

3 个答案: