0

自分のページに画像を動的にロードできる Web ページを作成したいと考えています。まだこれだけではありません...

「<div...」を動的に作成したいのですが、各 div 内でキャンバスを作成し、選択したフォルダーから背景画像を設定する必要があります。

これらの要素の作成は、選択したフォルダー内の画像の数によって異なります。すべての画像は、キャンバスの背景として表示する必要があります。各キャンバスには 1 つの画像しかありません。

私はこれらのものだけを使ってそれをしたい:

  1. HTML5
  2. CSS3
  3. jQuery

どうすればいいのですか？

4

1 に答える 1

0

あなたはそのようなjQueryでそれを簡単に行うことができます：

HTML

<a href="#" class="changeFolder" data-folder="audio">Audio</a>
<a href="#" class="changeFolder" data-folder="video">Video</a>
<div id="folder">
    <!-- your canvas -->
</div>

jQuery

$(document).on('click', '.changeFolder', function(e) {
   e.preventDefault();
   var folder = $(this).data('folder'),
       $folderCanvas = $('#folder');

    if(folder == 'video')
        $folderCanvas.css({'background-image': 'url(audio-img)'});
    else if(folder == 'audio')
        $folderCanvas.css({'background-image': 'url(video-image)'});                   
});

フィドルを見る

サーバー側では、フォルダーを解析していくつかの画像を見つけてから、Ajaxを使用してスクリプトを呼び出す必要があります。もしそうなら、私はあなたの質問を誤解しているかもしれませんので、コメントを残してください。

注：私はjQueryの最後のバージョンを使用しています。

于 2013-02-15T10:55:34.133 に答える