首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

javascript在div中缩放和拖动多个图像。获得了一些代码,但无法结束

要在div中实现图像的缩放和拖动,可以使用JavaScript结合HTML和CSS来实现。下面是一个基本的示例代码:

HTML部分:

代码语言:txt
复制
<div id="container">
  <img src="image1.jpg" class="draggable resizable">
  <img src="image2.jpg" class="draggable resizable">
  <img src="image3.jpg" class="draggable resizable">
</div>

CSS部分:

代码语言:txt
复制
#container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}

.draggable {
  position: absolute;
  cursor: move;
}

.resizable {
  resize: both;
  overflow: auto;
}

JavaScript部分:

代码语言:txt
复制
// 获取所有可拖动和可缩放的图像元素
var images = document.querySelectorAll('.draggable.resizable');

// 绑定拖动和缩放事件
images.forEach(function(image) {
  // 初始化拖动功能
  image.addEventListener('mousedown', startDrag);

  // 初始化缩放功能
  image.addEventListener('mousedown', startResize);
});

// 拖动功能实现
function startDrag(e) {
  var image = e.target;
  var offsetX = e.clientX - image.offsetLeft;
  var offsetY = e.clientY - image.offsetTop;

  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', stopDrag);

  function drag(e) {
    image.style.left = e.clientX - offsetX + 'px';
    image.style.top = e.clientY - offsetY + 'px';
  }

  function stopDrag() {
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', stopDrag);
  }
}

// 缩放功能实现
function startResize(e) {
  var image = e.target;
  var startX = e.clientX;
  var startY = e.clientY;
  var startWidth = parseInt(getComputedStyle(image).width);
  var startHeight = parseInt(getComputedStyle(image).height);

  document.addEventListener('mousemove', resize);
  document.addEventListener('mouseup', stopResize);

  function resize(e) {
    var newWidth = startWidth + e.clientX - startX;
    var newHeight = startHeight + e.clientY - startY;

    image.style.width = newWidth + 'px';
    image.style.height = newHeight + 'px';
  }

  function stopResize() {
    document.removeEventListener('mousemove', resize);
    document.removeEventListener('mouseup', stopResize);
  }
}

这段代码实现了在一个div容器中拖动和缩放多个图像。通过给图像元素添加draggableresizable类,使其可拖动和可缩放。拖动功能通过鼠标按下、移动和松开事件来实现,缩放功能通过鼠标按下、移动和松开事件来实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券