3

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

不过只有几个问题：

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

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

4

4 回答 4

2

我猜这就是你所追求的：

$(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();
        });
    });
});​

示范

还补充说：

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

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

于 2012-07-28T20:10:50.530 回答
1

好吧，假设你使用 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
于 2012-07-28T19:59:18.893 回答
0

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

试试 lightBoxMe 插件 http://buckwilson.me/lightboxme/

这是最简单的插件！

于 2012-07-28T20:26:28.350 回答
0

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

于 2012-07-28T19:58:36.813 回答