我在 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');
最佳答案
看起来你错过了从你的示例页面复制粘贴组件(女巫正在杀死我的浏览器)。
此代码来自您的示例页面。
(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');
关于javascript - 在 Chrome 中水平滚动时,平铺背景图像的动画背景位置停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20152232/