使用jQuery根据鼠标移动向背景位置值添加加减

Question

我在jQuery方面根本不称职，我擅长谷歌搜索，但这只让我走到了现在：(

我有一个全宽div.所述背景图像是使用定位

.no-bg {
background-position: 86% 93%;
}

我想根据用户的鼠标移动将awobble添加到背景图像中。

谷歌搜索让我找到了这个。。。

jQuery(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / jQuery(window).height();
var width = movementStrength / jQuery(window).width();
jQuery("body").mousemove(function(e){
var pageX = e.pageX - (jQuery(window).width() / 2);
var pageY = e.pageY - (jQuery(window).height() / 2);
var newvalueX = width * pageX * -1 - 1;
var newvalueY = height * pageY * -1 - 1;
jQuery('.no-bg').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});

所有这些都有效，而且它确实会使背景图像抖动。问题是我设置的背景位置被覆盖了。我想做的是将摆动值添加到86%93%中/从中减去。可以对上面的内容进行调整以实现这一点吗？或者如果有人有一些代码来实现这一目标，那就太好了。

尝试实现与此网站类似的目标https://eventlytemplate.webflow.io/

我知道他们在那个网站上没有使用背景图像，相反，他们在div中定位img，然后翻译3d。我正在将这种效果复古到一个已经建成的网站上，所以这不是一个选择。

感谢

TJ

Answer 1

这可能有效，我还没有测试过。

$(document).ready(function () {
var movementStrength = 25
var height = movementStrength / $(window).height()
var width = movementStrength / $(window).width()
var bgX = parseInt(getComputedStyle($(".no-bg")[0]).backgroundPositionX)
var bgY = parseInt(getComputedStyle($(".no-bg")[0]).backgroundPositionY)
$("body").mousemove(function (e) {
var pageX = e.pageX - $(window).width() / 2
var pageY = e.pageY - $(window).height() / 2
var newvalueX = width * pageX * -1 - 1
var newvalueY = height * pageY * -1 - 1
$(".no-bg").css(
"background-position",
`calc(${newvalueX}px + ${bgX}%) calc(${newvalueY}px + ${bgY}%)`
)
})
})

我对你提供的功能做了一些改动。CSS有一个calc()函数，在这种情况下对很有帮助

我还使用了JS中的getComputedStyle函数来获得原始背景位置值