Question

我身上有一个重复的背景图像。我正在使用jQuery的animate函数设置动画，以便background-position-x不断变化。问题是在Chrome上，背景不会为浏览器视口右侧的屏幕任何部分设置动画。换句话说，如果向右滚动，则会看到背景停止动画的行。

示例：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');

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

1 个答案: