Question

是否可以将完整尺寸的图像从网站拖放到资源管理器，其中仅显示缩略图。

我想在网站上显示一个带有缩略图的画廊，并且应该可以通过拖放将完整尺寸的图像下载到例如窗口浏览器中。

[编辑]：由于图像的大小，我不能只显示较小的原尺寸图像。

我将检查拖放事件。

Answer 1

感谢您的帮助，我真的很喜欢更改src属性的简单方法。

window.jQuery(document).ready(function () {
    let img = "#imageTest";
    function revert() {
        $(this).attr("src","https://placehold.it/200x200");
    }
    $(img).on('mousedown', function () {
        $(this).attr("src","https://placehold.it/2000x2000");
    });
    $(img).on("drag", revert)
    $(img).on("mouseup", revert);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id='imageTest' width="200px" class="image-preview" 
 src="https://placehold.it/200x200" alt="preview">

Answer 2

这是我提出的一个小例子，只是为了展示使用某些jQuery的选项。用户需要选择想要获得更高质量的图像。

$( ".trigger" ).click(function() {
  $(".image-preview").attr("src","https://placehold.it/2000x2000");
  $(this).slideUp('slow');
});

.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.image-preview {
  width: 200px;
  height: 200px;
 }
 
.trigger {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.2);
  color: #FFF;
  font-size: 13px;
  font-family: Tahoma;
  padding: 4px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
  <img class="image-preview" src="https://placehold.it/200x200" alt="preview">
  <span class="trigger">Get full size</span>
</div>

是否可以将完整大小的图像从网站拖放到资源管理器，其中仅显示缩略图

2 个答案: