Question

我正在尝试让这个背景淡入点击。我找到了一个有用的教程，最后我创建了代码，因此它有两个图像，并且它们在点击时淡入淡出以显示图片。这是工作：http://www.mccraymusic.com/bgchangetest.html

但只有几个问题：

如何在不随机选择图像的情况下完成此工作？我喜欢它只是从纯黑色图像切换到带有鼓组的图像。（如果可能的话，交叉淡入淡出，但不是必要的）
如何将图像置于页面中心，以便鼓的图像居中？

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元素以使图像居中。

Answer 2

好吧，假设你使用JQuery

你有#backgroundid和#imageid
首先设置

$('#backgroundid').css('opacity',1);
$('#imageid').css('opacity',0); // setting opacity (transparency) to 0, invisible

现在你有了#buttonid 设置一个jquery事件，以便在单击它时淡出背景，并使用JQuery的动画淡入图像。

$('#buttonid').click(function() {
    $('#backgroundid').animate(function() {
        opacity : 0 // fade it to 0 opacity, invisible
    }, 1000); // animation will take 1000ms, 1second
    $('#imageid').animate(function() {
        opacity : 1 // fade it to full opacity, solid
    }, 1000);
});

现在关于图像居中。
您可以 css 使用

进行管理

body { /* Body or #imageid parent */
    text-align : center;
}
#imageid {
    margin: 0px auto;
}

或者您可以使用绝对/固定定位来坚持 JQuery 解决方案首先，使用一些css来修复图像的位置

#imageid {
    position: absolute; // or fixed, if you want
}

现在使用JQuery重新定位

function positionImage() {
    var imagewidth = $('#imageid').width();
    var imageheight = $('#imageid').height();
    $('#imageid').css('left', ($(window).width() - imagewidth) / 2);
    $('#imageid').css('top', ($(window).height() - imageheight) / 2);
}
$(document).ready(positionImage); // bind the ready event to reposition
$(window).resize(positionImage); // on window resize, reposition image too

Answer 3

如果保持div元素的高度和宽度为100％，bgcolor为黑色。然后根据需要更改div的不透明度以获得淡入/淡出效果，这应该产生相同的效果。我想..

Answer 4

你最好使用任何可用的jQuery插件，因为他们会为多个浏览器优化和修复错误。

尝试使用lightBoxMe插件 http://buckwilson.me/lightboxme/

这是最简单的插件！

点击背景淡入

4 个答案: