gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 11:06:10 28 4
gpt4 key购买 nike

我希望当鼠标点击英雄面板区域时,飞机和火箭仅从其原始位置移动约 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/

谢谢

最佳答案

好的,我想我明白你在找什么: 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 的距离将视差效果应用为与原始位置的偏移变得容易。如果修改传递给视差的层值,移动量将会改变(我们将鼠标从对象起始位置中间的偏移量除以它,以计算新的对象偏移量)。

关于javascript - mousemove parallax 仅轻微移动而不是鼠标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33950114/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com