javascript - 在 mousemove Javascript 事件中反转动画？

Question

我正在尝试为静态背景制作动画，但我的问题是因为我没有这么大的背景图像并且我不想让用户看到我背景的外部。

遇到这个问题。当我达到 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");
});