3

クリックするとこの背景がフェードインするようにしようとしています。役立つチュートリアルが1つ見つかりました。最終的に、2つの画像が含まれるようにコードを作成し、クリックするとフェードインおよびフェードアウトして画像が表示されます。作業は次のとおりです：http ：//www.mccraymusic.com/bgchangetest.html

ただし、問題は2つだけです。

  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

高さと幅を100％、bgcolorを黒のdiv要素を保持する場合。次に、必要に応じてdivの不透明度を変更して、フェードイン/フェードアウト効果を取得します。これにより、同じ効果が生成されます。私は推測する..

于 2012-07-28T19:58:36.813 に答える
0

複数のブラウザのバグが最適化および修正されているため、利用可能なjQueryプラグインを使用することをお勧めします。

lightBoxMeプラグインをお試しください http://buckwilson.me/lightboxme/

これは利用可能な最も単純なプラグインです！

于 2012-07-28T20:26:28.350 に答える