Question

我是新来的，所以我无法评论/跟进另一个问题，即部分提供了答案因为我想要实现的目标。

关于这个问题[Moving Background image in a loop from left to right Jack Patishall Jr的精彩而非常详细的答案让我设置页面背景以垂直或水平滚动。

有没有办法合并方向代码，以便页面背景滚动对角（即从左下到右上）？
我已经＆＃34;残害＆＃34;杰克的代码现在已有好几天了，但无法弄清楚如何同时在两个方向上滚动背景。： - （

Answer 1

更新Jack Pattishall Jr的小提琴以更新x和y参数。同时将重复CSS设置为x和y。

$(function(){
    var x = 0;
    var y = 0;//here
    setInterval(function(){
        x+=1;
        y-=1;//here
        $('body').css('background-position', x + 'px ' + y + 'px');//here too
    }, 10);
})


background-repeat: repeat;/*and also here*/

Answer 2

从示例mentioned above开始，以下是我的更改：

html, body { height: 100%; width: 100%;}
body {
    background-image: url('http://coloradoellie.files.wordpress.com/2013/10/25280-ginger-kitten-leaping-with-arms-outstretched-white-background.jpg?w=300&h=222');
    background-repeat: repeat-x repeat-y; // this line could be removed entirely
}

$(function(){
     var x = 0;
     var y = 0;
     setInterval(function(){
         x+=1;
         y-=1;
         $('body').css('background-position', x + 'px ' + y + 'px');
     }, 10);
 })

变更简要说明：

将repeat-y添加到background-repeat或删除该行（我们已复制默认行为）
实例化并初始化y位置变量
在x轴上相加移动，在y轴上移动以使背景在所需方向上移动
编辑$（'body'）css以包含新的非静态y位置

感谢您的建议，Joseph Neathawk

在屏幕上对角移动背景图像

2 个答案: