Question

是否可以通过抓取并拖动实际图像，使用“小手”光标在div中手动滚动JPG？

例如，当您有长水平位图并希望在小窗口中显示它时，人们在放大时就像在照片编辑器中一样滚动。

Answer 1

你需要一些JavaScript魔法才能做到这一点。看看这个：http://jsfiddle.net/bCuGM/。

<style type="text/css">
  #container {
    width: 400px;
    height: 400px;
    overflow: hidden;
    cursor: pointer;
  }
  #draggable {
    width: 1024px;
    height: 819px;
  }
</style>

<div id="container">
  <div id="draggable">
    <img src="http://farm3.staticflickr.com/2593/3884464511_a77144821e_b.jpg">
  </div>
</div>

<script>
  $("#draggable").draggable();
</script>

Answer 2

您可以使用javascript和一些css来完成。

在您的图片上添加一条css规则：

cursor: pointer;

使用javascript，在图片上添加mousedown，mousemove和mouseup事件。然后使用javascript更改父div上的滚动

是否可以使用“小手”光标在div内手动滚动JPG？

2 个答案: