如何使用css和js在div内部的每个图像的图像控制按钮？ [英] How to make image control button for each image inside the div using css and js?

问题描述

如何使图像控制按钮像关闭，调整大小，旋转按钮为每个图像悬停。有一个div，每个图像是可拖动的。

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

这是我的HTML

  $（function（）{var a = 1; $（.child ）.draggable（{containment：parent，start：function（event，ui）{$（this）.css（z-index，a ++）;}}）hover .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;显示：block; box-sizing：border-box; width：20px; height：20px; border-width：3px; border-style：solid; border-color：red; border-radius：100％;背景：-webkit-线性梯度（-45deg，透明0％，透明46％，白色46％，白色56％，透明56％，透明100％透明46％，白色46％，白色56％，透明56％，透明100％）。 background-color：red; box-shadow：0px 0px 5px 2px rgba（0,0,0,0.5）; transition：all 0.3s ease;}  

 < 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>  

我不需要交叉线和边框三个角中的三个按钮一个用于关闭一个，用于调整大小以旋转

关闭按钮已实现。对于旋转我知道代码

  var rotation = 0; 
 var rotation = false; 
 var startX = 0; 
 
 jQuery.fn.rotate = function（degrees）{
 $（this）.css（{'transform'：'rotate（'+ degrees +'deg）'}）; 
}; 
 
 $（document）.mousemove（function（e）{
 if（！rotation）return; 
 rotation = startX  -  e.clientX; 
 $ .child'）。rotate（rotation）; 
}）; 
 
 $（document）.on（mouseup，function（）{
 rotation = false; 
}）; 
 
 $（'。rotateButton1'）。on（mousedown，function（e）{
 e.stopImmediatePropagation（）; 
 rotation = true; 
 startX = e.clientX; 
}）; 
  

请帮助实现这三个按钮和功能。

解决方案

要调整大小，请使用 jQuery UI的 .resizable（） 方法

对于旋转，请使用 jquery-ui-rotating 插件。

.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：

 code> var a = 1; 
 
 $（.child）
 .rotatable（）
 .draggable（{
 containment：parent，
 start：function ，ui）{$（this）.css（z-index，a ++）;} 
}）
 .hover（function（）{
 $（this）.find .ui-rotate-handle，.ui-resizable-handle，.remove'）。show（）; 
}，function（）{
 $（this）.find（'。ui-rotate- handle，.ui-resizable-handle，.remove'）。hide（）; 
}）
 .append（'< button class =remove>< / button>'）
 .on（'click'，'.remove'，function（）{
 $（this）.closest（'。child'）。remove（）; 
}）
 .find（.child2）.resizable（{
 //保持宽高比：
 aspectRatio：true 
}）
 //隐藏控制柄：
 .trigger（'mouseleave'）; 
  

JSfiddle Demo

how to make image control button like close, resize, rotate button for each images on hover . There is a div in which each image is draggable.

I need to make a image controll button near to each image. That button need to visible only when we touch or moving mouse pointer on the image, that is the button need to show in it's hover effect.

This is my HTML

$( 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;
}

<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>

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

i need output like this

i don't need the cross line and border box , just 3 buttons in three corner one for close one for resize one for rotate

Close button already implemented . For rotation i know the code

var rotation = 0;
var rotating = false;
var startX = 0;

jQuery.fn.rotate = function(degrees) {
   $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};

$(document).mousemove(function(e){                
   if (!rotating) return;
   rotation = startX - e.clientX;
   $('.child').rotate(rotation);      
});

$(document).on("mouseup", function(){
   rotating = false;
});

 $('.rotateButton1').on("mousedown", function(e) {
   e.stopImmediatePropagation();
   rotating = true;
   startX = e.clientX;
});

Please help to implement these three buttons and functionality with this image . Thank you .

解决方案

For resizing, use .resizable() method of jQuery UI
For rotation, use jquery-ui-rotatable plugin.

.draggable() and .rotatable() apply to .child elements and .resizable() directly to images.

<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

这篇关于如何使用css和js在div内部的每个图像的图像控制按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！