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

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 вступают в игру в другой части, которая работает, за исключением этого нажатия/вытягивания.

EDIT: Обновлено, чтобы включить весь файл и here - это скрипка.

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

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 

• Обратите внимание, что я гавань проверил это на ошибки, это показать принцип. Может быть, что вам нужно изменить newOff «s + к -

  ---

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