单击时背景淡入

Background fade in on click

本文关键字：淡入 背景 单击      更新时间：2024-03-30

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

不过只有几个问题：

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

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

好吧，假设你使用 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
如果将

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

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

试用光盒插件http://buckwilson.me/lightboxme/

这是最简单的插件！

相关文章：