javascript - mousemove parallax 仅轻微移动而不是鼠标位置

Question

我希望当鼠标点击英雄面板区域时，飞机和火箭仅从其原始位置移动约 5%。

当前代码使图像跟随和偏移鼠标位置。

请协助。

$(document).ready(function () {
    $('#hero-panel').mousemove(function (e) {
        parallax(e, document.getElementById('plane'), 1);
        parallax(e, document.getElementById('rocket'), 2);
    });
});

function parallax(e, target, layer) {
    var layer_coeff = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 4 - (e.pageX - ($(window).width() / 4)) / layer_coeff;
    var y = ($(window).height() - target.offsetHeight) / 4 - (e.pageY - ($(window).height() / 4)) / layer_coeff;
    $(target).offset({ top: y ,left : x });
};

https://jsfiddle.net/jc0807/c5yke2on/

谢谢

Answer 1

好的，我想我明白你在找什么: fiddle

$(document).ready(function () {
    var plane = document.getElementById('plane');
    var rocket = document.getElementById('rocket');
    plane.homePos = { x: plane.offsetLeft, y: plane.offsetTop };
    rocket.homePos = { x: rocket.offsetLeft, y: rocket.offsetTop };

    $('#hero-panel').mousemove(function (e) {
        parallax(e, document.getElementById('plane'), 10);
        parallax(e, document.getElementById('rocket'), 20);
    });
});

function parallax(e, target, layer) {
    var x = target.homePos.x - (e.pageX - target.homePos.x) / layer;
    var y = target.homePos.y - (e.pageY - target.homePos.y) / layer;
    $(target).offset({ top: y ,left : x });
};

我们在这里所做的是将飞机和火箭的起始位置记录为飞机和火箭对象上的新属性“homePos”。这使得根据鼠标与对象 homePos 的距离将视差效果应用为与原始位置的偏移变得容易。如果修改传递给视差的层值，移动量将会改变(我们将鼠标从对象起始位置中间的偏移量除以它，以计算新的对象偏移量)。