视差鼠标移动帮助、JQuery、HTML、CSS答案

【问题标题】：Parallax Mouse Movement Help, JQuery, HTML, CSS视差鼠标移动帮助、JQuery、HTML、CSS
【发布时间】：2015-09-17 20:30:21
【问题描述】：

我仍然是 JQuery 的初学者，我自己决定使用 mousemove 找出视差背景（我相信这被称为视差效果）。我正在使用event.pageX 创建一个变量，稍后用于设置背景位置。

它可以工作，但代码绝对是新手级别的。每次刷新页面时，我都需要为背景移动鼠标以启动视差效果 - 例如，背景从 50% 0% 开始，当我移动鼠标时，它会变为 10.5% 0% 并且是在第一次初始鼠标移动后平滑。

我想知道是否有办法在页面加载时自动调用mousemove 函数。或者有没有更好的方法来重新格式化我想要做的代码？

JS

$('.background').on( "mousemove", function( event ) {
    var Xparallax = (event.pageX / 300)
    $('.background').css({
        'background-position' : Xparallax + '% 15%'
    });
});

HTML

<div class="background" style=""></div>

CSS

div.background {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-image: url("/images/bg3.jpg");
    background-position: 50% 15%;
    background-size: 125%;
}

【问题讨论】：

标签： jquery html css parallax

【解决方案1】：

试试这个：

$(window).scroll(function(){
var Xparallax = $(this).scrollTop();
    $('.background').css({
        'background-position' : Xparallax + '% 15%'
    });
})

【讨论】：

很酷的效果，但我希望鼠标影响背景的位置。这是两张图片 [链接] (puu.sh/ipMV4.jpg) [链接] (puu.sh/ipMSg.jpg)。所以基本上你给出的只是使用鼠标移动，我已经有了我只需要修复错误的代码，以便第一个初始移动不会使背景跳转。我认为最简单的方法是在加载时手动调用 movemouse 函数，但我也不知道怎么做。
制作一个jsfdille，我会尽力帮助你:)！