Переместить в зависимости от состояния мыши

Question

Мне нужно, чтобы мои пользователи могли перемещать элемент от указателя мыши, удерживая левую кнопку нажатой, и элемент должен двигаться ближе, когда кнопка вверх. Пока у меня есть это:

var divName = 'follow'; // div to follow mouse
// (must be position:absolute)
var offX = 0; // X distance from mouse
var offY = 0; // Y distance from mouse

function mouseX(evt) {
    if (!evt) evt = window.event;
    if (evt.pageX) return evt.pageX;
    else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else return 0;
}

function mouseY(evt) {
    if (!evt) evt = window.event;
    if (evt.pageY) return evt.pageY;
    else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    else return 0;
}

function follow(evt) {
    if (document.getElementById) {
        var obj = document.getElementById(divName).style;
        obj.visibility = 'visible';
        obj.left = (parseInt(mouseX(evt)) + offX) + 'px';
        obj.top = (parseInt(mouseY(evt)) + offY) + 'px';
    }
}
document.onmousemove = follow;

function discharge() { //Move away
    offX += 1;
    offY += 1;
 }

function pull() { //Come closer
    if (offX > 0) {
        offX -= 1;
    }
    if (offY > 0) {
        offY -= 1;
    }
}
document.onmousedown = discharge;
document.onmouseup = pull;

offX а также offY расстояние, на котором элемент находится от мыши. Кроме того, это только одна часть сценария. offX а также offY вступить в игру с другой стороны, которая работает, за исключением этого push / pull.

РЕДАКТИРОВАТЬ: Обновлено, чтобы включить весь файл, и вот скрипка.

Больше информации: Моя главная цель состояла в том, чтобы изображение внутри элемента следовало за мышью и двигалось ближе / дальше в зависимости от состояния мыши. Если у кого-то есть другой способ добиться этого, это также будет высоко оценено.

Answer 1

Вот полный пример использования JQuery:

var divName = 'follow'; // div to follow mouse
// (must be position:absolute)
var offX = 0; // X distance from mouse
var offY = 0; // Y distance from mouse
var mouseX;
var mouseY;
var mouseState = 0;
var _this = this;

function follow(evt) {
  if(_this.mouseState === 1) {
    discharge();
  } else {
    pull();
  }
    if (document.getElementById) {
        var obj = document.getElementById(divName).style;
        obj.visibility = 'visible';
        obj.left = evt.pageX + _this.offX + 'px';
        obj.top = evt.pageY + _this.offY + 'px';
    }
}

document.onmousemove = follow;

function discharge() { //Move away
    _this.offX += 1;
    _this.offY += 1;
}

function pull() { //Come closer
    if (_this.offX > 0) {
        _this.offX -= 1;
    }
    if (_this.offY > 0) {
        _this.offY -= 1;
    }
}

$(document).mousedown(function(e){_this.mouseState = 1;});
$(document).mouseup(function(e){_this.mouseState = 0; });

Answer 2

То, что вы хотите, требует двух смещений, мыши и элемента.

var offX = 100; // mouse X-axis
var offY = 50;  // mouse Y-axis

var elemOffX = 950; // elem X-axis
var elemOffY = 600; // elem Y-axis

// Now get the distance from the elem to the mouse:
var diffX = offX - elemOffX; // get the diff X
var diffY = offY - elemOffY; // get the diff Y

// Depending on your interval you might want to change the factor,
// this will move it in steps of 10%
var newOffX = offX + (diffX * 0.1); // set this as new result for the element's X
var newOffY = offY + (diffY * 0.1); // set this as new result for the element's Y

• Пожалуйста, обратите внимание, я не проверял это на ошибки, чтобы показать принцип. Может быть, вам нужно изменить newOffS + к -

  ---

В вашем примере вы делаете это: offY-1, вам нужно изменить это на offY=offY-1 или же offY-=1