Question

我希望图像显示在连续显示中，但在chrome上，图像会显示和消失我正在使用此代码：

$(document).scroll(function () {

if ($(this).scrollTop() > 50) {
    $('body').css("background-image", 'url("1.jpg")').fadeIn("slow");
}
if ($(this).scrollTop() > 100) {
    $('body').css("background-image", 'url("2.jpg")').fadeIn("slow");
}
if ($(this).scrollTop() > 150) {
    $('body').css("background-image", 'url("3.jpg")').fadeIn("slow");
}
if ($(this).scrollTop() > 200) {
    $('body').css("background-image", 'url("4.jpg")').fadeIn("slow");
}
if ($(this).scrollTop() > 250) {
    $('body').css("background-image", 'url("5.jpg")').fadeIn("slow");
}
if ($(this).scrollTop() > 300) {
    $('body').css("background-image", 'url("6.jpg")').fadeIn("slow");
}
if ($(this).scrollTop() > 350) {
    $('body').css("background-image", 'url("7.jpg")').fadeIn("slow");
}
if ($(this).scrollTop() > 400) {
    $('body').css("background-image", 'url("8.jpg")').fadeIn("slow");
}
if ($(this).scrollTop() > 450) {
    $('body').css("background-image", 'url("9.jpg")').fadeIn("slow");
}
if ($(this).scrollTop() > 500) {
    $('body').css("background-image", 'url("10.jpg")').fadeIn("slow");
}


});

Answer 1

我假设你想要这样的东西：

var images = [];
images[0] = "1.jpg";
images[1] = "2.jpg";
images[2] = "3.jpg";
images[3] = "4.jpg";
...
images[X] = "...";


$(document).scroll(function() {

    if ($(this).scrollTop() > 0) {

        $('body').css("background-image", 'url(' +
                          images[Math.min($(this).scrollTop()/50, images.length] 
                      +')').fadeIn("slow");
    }


});

用鼠标滚轮改变身体背景＆＃34;滚动＆＃34;

1 个答案: