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;

offXoffYは、マウスから要素までの距離です。また、これはスクリプトの一部にすぎません。このプッシュ/プルを除いて機能する別の部分で機能しますoffXoffY

編集:ファイル全体を含めるように更新されました。ここにフィドルがあります。

詳細:私の主な目標は、div 内の画像をマウスに追従させ、マウスの状態に応じて近づけたり遠ざけたりすることでした。誰かがこれを達成する別の方法を持っている場合は、それも大歓迎です。

4

2 に答える 2