0

私はjqueryを初めて使用するため、次のことを行う必要があります: ユーザーが正確なリンクをクリックしたとき。画面の中央に正確な画像が表示され、フェード効果の有無にかかわらず (どちらか簡単に)、4 秒後に消えます。

頭の中で私はこれを含めました：

<script src="http://code.jquery.com/jquery-latest.js"></script>

本文にこれを含めました： <a href="#" id="myLink">click</a> <img src="achievement.png" id="myImage" style="display:none">

私はそれを理解しました。ウェブサイトのコンテンツにオーバーレイするように設定するにはどうすればよいですか? CSSはおそらく

4

2 に答える 2

0

colorboxプラグインを使用してモーダルで画像を簡単に表示することもできます。このプラグインには他にも多くの機能があります。カラーボックスを自動的に閉じるために必要なコード4 secは次のとおりです

   $('.colorbox').colorbox({
        onOpen: function(){
           window.setTimeout(function() {
             $.colorbox.close();
          }, 4000);
        }
    });

ワーキングデモ

于 2012-05-21T11:33:17.760 に答える
0

このようなものはどうですか：

$('#myLink').click(function(){
    $('#myImage').fadeIn().delay(4000).fadeOut();
});

css を使用して画像を画面の中央に配置する良い方法を次に示します。

html:

<div id="myImage"></div>

CSS:

#myImage{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: url(path/to/image.png) center center no-repeat;
}

<img> タグの代わりに背景画像を含む <div> タグを使用していることに注意してください。これは、css を使用して中央に配置する方がはるかに簡単です。

于 2012-05-21T11:12:13.667 に答える