背景淡入点击

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

只有几个问题：

如何让我没有图像这项工作在随机选择得到？我希望它只是从普通的黑色图像切换到带鼓组的图像。（如果可能但不是必需的，则淡入淡出）
如何将图像放在页面上，使鼓的图像居中？

2012-07-28 Lavi Hendin

我猜这是你以后：

$(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元素为中心的图像。

来源

2012-07-28 20:10:50 adeneo

是的。谢谢，这就是效果！背景仍然不会居中。 – 2012-07-28 22:15:40

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

来源

2012-07-28 19:58:36

好吧，假设你使用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-28 19:59:18 Overcode

它不适用于我 – 2012-07-28 22:09:58

哪部分不工作？ – Overcode 2012-07-30 02:35:27

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

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

这是最简单的插件可用！

来源

2012-07-28 20:26:28 afrin216

背景淡入点击

回答

相关问题