Question

我有以下代码：

var currX = 0;
var currY = 0;
var player = $('#player');
//Checks to see which key is pressed down
        $(window).on('mousedown', function(e) { 
            currX = e.offsetX;
            currY = e.offsetY;
            console.log(e.offsetX + ', ' + e.offsetY);
        });


        player.css({
            left: function(index,value) { return (value + currX + 'px'); },
            top: function(index,value) { return  (value + currY + 'px'); }
        });

图像根本不移动。我console.log两个偏移量，它们被正确打印出来。

谢谢！

Answer 1

您正在为函数设置top和left的值。执行该代码时，将对其进行一次评估。如果希望player移动，您希望在mousedown侦听器中执行该代码。

Answer 2

你应该在mousedown事件中应用这个css：

$(window).on('mousedown', function (e) {
    currX = e.offsetX;
    currY = e.offsetY;
    console.log(e.offsetX + ', ' + e.offsetY);
    player.css({
        left: currX + 'px',
        top: currY + 'px'
    });
});

<强> FIDDLE

通过指向X，Y坐标来移动图像

2 个答案: