如何使用css和js为div内的每个图像制作图像控制按钮？

Question

如何在悬停时为每个图像制作关闭，调整大小，旋转按钮等图像控制按钮。有一个div，每个图像都可以拖动。

我需要在每个图像附近制作一个图像控制按钮。只有当我们触摸或移动图像上的鼠标指针时，该按钮才需要可见，即按钮需要显示其悬停效果。

这是我的HTML

import io
b=io.BytesIO()
b.write(b"foo")
b.write(b"bar")
print(b.getvalue())

'foobar'

$( function() {
  var a = 1;
  $( ".child" ).draggable({
    containment: "parent",
    start: function(event, ui) { $(this).css("z-index", a++); }
  }).hover(function(){
    $(this).prepend('<button class="remove"></button>');
  }, function(){
    $(this).find('.remove').remove();
  }).on('click', '.remove', function(){
    $(this).closest('.child').remove();
  });
});

.parent{
  z-index:1;
  min-height: 200px;
  background-image: url('http://img.freepik.com/free-vector/white-canvas-background_1053-239.jpg?size=338&ext=jpg');
}
.child{
  position: absolute;
  z-index:1;
}

.remove{
  position: absolute;
  top: 0px;
  right: 0px;
  display:block;
  box-sizing:border-box;
  width:20px;
  height:20px;
  border-width:3px;
  border-style: solid;
  border-color:red;
  border-radius:100%;
  background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
  background-color:red;
  box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

https://jsfiddle.net/felixtm/x3xb2jwf/7/

我需要像

这样的输出

我不需要十字线和边框，只需要三个角落中的3个按钮用于关闭一个用于调整旋转的按钮

已实施关闭按钮。为了轮换我知道代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="parent">
  <div class='child'>
    <img src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' />
  </div>
  <div class='child'>
    <img src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' />
  </div>
  <div class='child'>
    <img src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' />
  </div>
</div>

请帮助您使用此图片实现这三个按钮和功能。谢谢。

Answer 1

要调整大小，请使用jQuery UI的.resizable()方法 要轮换，请使用jquery-ui-rotatable插件。

.draggable()和.rotatable()直接适用于.child元素，.resizable()适用于图片。

<div class="parent">
  <div class='child'>
    <img class='child2' src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' />
  </div>
  <div class='child'>
    <img class='child2' src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' />
  </div>
  <div class='child'>
    <img class='child2' src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' />
  </div>
</div>

jQuery的：

var a = 1;

$( ".child" )
  .rotatable()
  .draggable({
    containment: "parent",
    start: function(event, ui) { $(this).css("z-index", a++); }
  })
  .hover(function(){
    $(this).find('.ui-rotatable-handle, .ui-resizable-handle, .remove').show();
  }, function(){
    $(this).find('.ui-rotatable-handle, .ui-resizable-handle, .remove').hide(); 
  })
  .append('<button class="remove"></button>')
  .on('click', '.remove', function(){
    $(this).closest('.child').remove();
  })
  .find( ".child2" ).resizable({
    // to keep aspect ratio:
    aspectRatio : true
  })
  // hide control handles:
  .trigger('mouseleave');

JSfiddle Demo