可拖动的背景图像与背景大小：封面

Question

我有一个固定的div，其中包含一个像这样的背景图像

<div style='
     width:230px;
     height:230px;
     background-repeat: no-repeat;
     background-image:url(img/myimage.jpeg)
     background-size: cover;'></div>

图像与div框重叠。 用户应该能够拖动图像，并且在用户释放鼠标之后，可以通过jQuery以某种方式访问​​新的 background-position：坐标。我的目标是创建一个非常简单的废话图像效果，就像在facebook中一样：

我怎么能做到这一点？甚至可以用background-size显示overflowig背景：cover？

Answer 1

您可以使用此Plugin，然后尝试

element.backgroundDraggable()

这里有demo

Answer 2

您需要处理div上的mousemove事件，并从那里计算新的background-position。

以下是一个让您入门的示例：http://codepen.io/dghez/pen/ItxKE

要查看是否在mousemove处理程序中按下了鼠标左键（以模拟拖动），请检查e.buttons === 1（MDN）

<强>更新

来自示例的修改后的mousemove处理程序，它允许您拖动背景（同时烦人地选择文本...）：

...
$(".title").mousemove(function(e) {
    if(e.buttons === 1) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
        traX = mouseX + 1640;
        traY = mouseY + 200;
        //console.log(traX, traY);
        $(".title").css({"background-position": traX + "px " + traY + "px"});
    }
});