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在不同的部分发挥作用，除了这种推/拉之外，它起作用。

编辑：已更新以包含整个文件，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

请注意，我没有测试过这个bug，这是为了表明原则。您可能需要将newOff的 + 更改为 -

在您的示例中，您执行此操作：offY-1，您需要将其更改为offY=offY-1或offY-=1

根据鼠标状态移动

2 个答案: