在mousemove Javascript事件中反向动画？

Question

我正在尝试动画静态背景，但我的问题是因为我没有这么大的背景图像而且我不希望用户看到我背景的外部。< / p>

遇到这个问题。当我达到1280及以上时，我正试图反转我的 event.pageX 值，但我无法弄清楚如何反转动画....

$("header .headerInnerWrapper").mousemove(function(event) {
var xPos = event.pageX;
console.log(xPos);

if(xPos>=1280){//reverse the number
    //will be 1279,1278, 1277.......
}

 bg.css('backgroundPosition', [xPos] + "px");
});

Answer 1

$("header .headerInnerWrapper").mousemove(function(event) {
var xPos = event.pageX;
console.log(xPos);

if(xPos>=1280){
    xPos = 2560 - xPos; // that would be 1280 - (xpos -1280);
}

 bg.css('backgroundPosition', [xPos] + "px");
});

或使用所有值：

$("header .headerInnerWrapper").mousemove(function(event) {
var xPos = event.pageX;
console.log(xPos);

if(xPos>=1280){
    xPos = Math.ceil(xPos/1280)*1280 - xPos; 
}

 bg.css('backgroundPosition', [xPos] + "px");
});