0

我需要我的用户能够通过按住左键将元素从鼠标指针移开，并且当按钮向上时元素应该移近。到目前为止，我有这个：

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

编辑：更新以包含整个文件，这是一个小提琴。

更多信息：我的主要目标是让 div 中的图像跟随鼠标并根据鼠标的状态移动更近/更远。如果有人有不同的方法来实现这一点，也将不胜感激。

4

2 回答 2

0

这是一个使用 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; });
于 2013-12-24T13:31:40.760 回答
0

您想要的需要两个偏移量，即鼠标的偏移量和元素的偏移量。

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-1oroffY-=1

于 2013-12-24T13:32:45.833 回答