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

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上的滚动