Question

以下是我一直在尝试使用的代码：

$(document).ready(function() {
    var cc = 0;
    var drag = false;
    var bgp = 10;

    $('body').mousedown(function(){
        var bg =  Number($('body').css('background-position-x').replace(/[^-\d\.]/g, ''));
        bgp =+ bg;
        drag = true;
    });

    $('body').mouseup(function(){
        drag = false;
    });

    $('body').mousemove(function(e){
         $(this).mousedown(function(){
             cc =+ e.pageX;
         });
         if (drag==true) {
             cc =+ e.pageX;
         }

        function pan() {
             $('body').css('background-position',bgp+cc);
        } 

        if(drag==true) {
             pan();
        }
    });
});

它很有效但不是相对于你移动鼠标的距离改变背景位置，而是根据鼠标距离页面左边缘的距离来设置背景。

我对如何解决此问题的想法是在单击鼠标时拖动鼠标位置时将背景设置为原始位置+鼠标位置。虽然如果有一种完全不同的解决方法，那也很好。

我正在尝试自学jquery，所以我愿意批评我的代码

Answer 1

捕捉你的mousedown动作的起始位置和你的初始背景位置（x和y）：

var startX = event.pageX;
var startY = event.pageY;
var initialX = parseInt($('body').css('background-position-x'));
var initialY = parseInt($('body').css('background-position-y'));

在您的mousemove事件中捕获startX和您的movingX

之间的差异

var differenceX = startX - e.pageX;
var differenceY = startY - e.pageY;

然后将这些差异添加到您的初始背景位置x和y。

$('body').css('background-position-y', (initialY + differenceY));
$('body').css('background-position-x', (initialX + differenceX));

如何在没有jquery UI的情况下制作可拖动的背景？

1 个答案: