javascript - 单击时背景淡入

Question

我试图让这个背景在点击时淡入。我找到了一个很有帮助的教程，最后我创建了代码，它有两个图像，它们在点击时淡入淡出以调出图片。这是工作:http://www.mccraymusic.com/bgchangetest.html

不过只有几个问题:

1. 如何在不随机选择图像的情况下完成这项工作？我希望它只是从纯黑色图像切换到带有鼓组的图像。 (如果可能，交叉淡入淡出，但不是必需的)

2. 如何使页面上的图像居中，使鼓的图像居中？

Answer 1

我猜这就是你想要的:

$(function() {
    var images = ["black.jpg","bg.jpg"];
    $('<img>').attr({'src':'http://www.mccraymusic.com/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);

    $('.entersite').click(function(e) {
        e.preventDefault();
        var image = images[1];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'http://www.mccraymusic.com/assets/images/'+image); 
              $(this).fadeIn(1000);
        });
        $(this).fadeOut(1000, function() {
            $(this).remove();
        });
    });
});​

DEMONSTRATION

还添加了:

display: block;
margin-left: auto;
margin-right: auto;

添加到您的 #bg 元素以使图像居中。