0

これに取り組むのはこれが初めてなので、用語が間違っている場合は修正してください。

高さ 500、幅 500 の div ボックスがあり、最初に読み込まれたときにテキスト コンテンツが含まれます。一番下に「ここをクリック」というボタンがあります。そのボタンをクリックすると、ボックスの背景を変更して画像を読み込みたいと思います。

以下の図を参照してください。

だからいつ

4

4 に答える 4

2

個人的には、別のより直接的なアプローチを採用します。つまり、必要な画像が数個しかない場合は、それらを事前に取得して非表示にし、不要なサーバー リクエストをスキップすることもできます。

働くフィドル

コード：

HTML:

<div id="container">
    <div id="button_layer">
        <p>Some Text</p>
        <button>Click Me</button>
    </div>
    <div id="images_layer">
        <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
        <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
         <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
    </div>
   </div>

CSS:

#container {
width:500px;
height:500px;
background:grey;
}
#images_layer {
display:none;
}

JS:

 $(document).ready(function(){
    $("button").click(function(){
         $("#button_layer").hide();
        $("#images_layer").show();
        $("#container").css("background","yellow");
    })
  });

</p>

于 2012-12-09T19:03:16.293 に答える
1

これを試して

var images = 10;

$('button').on('click' , function(){
    var html = '';
    for(var i =0;i<images ; i++){
      html += '<img src="images/image-'+ images + '"></img>';   
    }

    $('.a').removeClass('a').addClass('b').html(html);

});​

​&lt;div class="a">
   I am the initial div...
</div>

​&lt;button>Click Me</button>​​​​​​​​​​​​​​​​​​​​​​​​​

フィドルをチェック

于 2012-12-09T18:47:35.527 に答える
1

このタスクを達成するには、クリック関数をキャプチャし、サーバーから要求して div にデータをロードします。 

$('button').on('click', function(){
    $.ajax({
        type: 'GET', //default anyway
        url: '/path/to/my/controller.ext',
        data: {'getImages' : true},
        success: function(data){
             $('.box').html(data); 
        }
    });
});

次に、サーバー側で get リクエストをキャプチャして、画像の文字列を返すことができます。この例は PHP です。

if(isset($_GET['getImages']) && TRUE === $_GET['getImages']):
    //build some string to pass images..
    $str = '<img src="path/to/my/first_img.ext"/><img src="path/to/my/second_img.ext"/><img src="path/to/my/third_img.ext"/><img src="path/to/my/fourth_img.ext"/><img src="path/to/my/fifth_img.ext"/>';
    echo $str;
endif;

.ajax()呼び出しで提供されたファイル名へのリクエストが発生すると、GETリクエストを使用して画像を取得します。の存在と値を条件付きでチェックしますgetImages。内部に画像を含む文字列を作成し、それを返します。呼び出しの は、返されたデータを処理しますsuccess:function(data)。ajax()この例では。データは$str当店で作成したものphp conditionalです。ボックスの HTML を、サーバーから提供された文字列に変更するだけです。

于 2012-12-09T18:47:50.670 に答える
0

アニメーションで背景色を変更する例をアップロードしました。

http://jsfiddle.net/TBvcW/1/

CSS3を使用して作成されていますが、CSS3をサポートしていないブラウザは、アニメーションなしで色を変更します。色のアニメーションのキーコードは、次のCSSプロパティです。

-webkit-transition: background-color 0.5s, color 0.5s;
-mox-transition: background-color 0.5s, color 0.5s;
-o-transition: background-color 0.5s, color 0.5s;
transition: background-color 0.5s, color 0.5s;

ここで、（CSSを使用して）変更したときにアニメーション化するプロパティと、アニメーションにかかる時間を決定します。

他の回答で説明されているように、ボックスの高さを変更して画像を追加することもできます。

http://jsfiddle.net/TBvcW/2/

乾杯。

于 2012-12-09T19:06:42.807 に答える