Question

现在我有一系列if语句，每个语句测试窗口是否滚动到某个点，如果是，则更改背景。由于每个if语句非常相似，我想知道是否可以将所有if语句合并为一个。由于我有超过一百个图像，我正在使用这种方法，我必须为每个图像制作一个if语句。

我的代码示例如下。你会注意到的唯一改变的是scrolltop（）/ 2＆gt; _ 和MAH00046％2028.jpg。

    if ($(this).scrollTop()/2 > 2800) {
    $('body').css({
        backgroundImage: 'url(    "images/chapter_background_images/MAH00046%20028.jpg")'
    });
}

if ($(this).scrollTop()/2 > 2900) {
    $('body').css({
        backgroundImage: 'url(    "images/chapter_background_images/MAH00046%20029.jpg")'
    });
}

Answer 1

这样效果最好：

var imageBase = 'images/chapter_background_images/MAH00046%200';            
var scrollTopHalf = $(this).scrollTop() / 2;
if(scrollTopHalf < 2900 || scrollTopHalf > 3900)
{           
    var image = imageBase + (Math.floor(scrollTopHalf / 100)).toString() + '.jpg';

    $('body').css({
        backgroundImage: 'url("' + image + '")'
    });
}

我的另一种方法效率很低。

Answer 2

使用计算结果来创建指向图片的链接，而不是使用if语句，因为图片的名称是连续的数字。

var inc = 100;
var imgUrl = 'images/chapter_background_images/MAH00046%';
var url = imgUrl.concat((Math.floor(scrollTop()/2)/inc)*inc).toString());

我在这里使用100，但您可以更改图片之间每个增量值的此值。

javascript floor method

javascript concatenate method

Javascript tostring method

Answer 3

使用for循环进行轻微变化，假设基数为2800的增量为100（并且每个jpg文件名成功增加1个

function myFunction() {
var counter = //number of if statements
for (i = 28; i <= i + counter; i++) {
    if ($(this).scrollTop()/2 > 100*i) {
        $('body').css({backgroundImage: 'url("images/chapter_background_images/MAH00046%200"' + i + '".jpg")'});
    }
}

将一系列If语句合并为一个代码

3 个答案: