javascript - 在 Chrome 中水平滚动时，平铺背景图像的动画背景位置停止

Question

我在 body 上设置了重复的背景图像。我正在使用 jQuery 的 animate 函数对其进行动画处理，以便 background-position-x 不断变化。问题是在 Chrome 上，浏览器视口(viewport)右侧屏幕的任何部分的背景都没有动画。换句话说，如果向右滚动，您会看到背景停止动画的那一行。

示例:http://proxis.us/mwo/map.php

CSS:

body {
  background: url('images/bg.jpg');
  background-attachment: fixed;
}

Javascript:

$('body').animate({ backgroundPosition:"(-10000px 0px)" }, 1280000, 'linear');

Answer 1

看起来你错过了从你的示例页面复制粘贴组件(女巫正在杀死我的浏览器)。

此代码来自您的示例页面。

(function($){$.extend($.fx.step,{backgroundPosition:function(fx){if(fx.state===0&&typeof fx.end=='string'){var start=$.curCSS(fx.elem,'backgroundPosition');start=toArray(start);fx.start=[start[0],start[2]];var end=toArray(fx.end);fx.end=[end[0],end[2]];fx.unit=[end[1],end[3]]}var nowPosX=[];nowPosX[0]=((fx.end[0]-fx.start[0])*fx.pos)+fx.start[0]+fx.unit[0];nowPosX[1]=((fx.end[1]-fx.start[1])*fx.pos)+fx.start[1]+fx.unit[1];fx.elem.style.backgroundPosition=nowPosX[0]+' '+nowPosX[1];function toArray(strg){strg=strg.replace(/left|top/g,'0px');strg=strg.replace(/right|bottom/g,'100%');strg=strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var res=strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]}}})})(jQuery);

和

$('body').animate({ backgroundPosition:"(-10000px 0px)" }, 1280000, 'linear');