动态加载图像作为画布背景。我该怎么做？

Question

我愿意创建一个可以在我的页面上动态加载图片的网页。这还不是全部......

我想在每个div中动态创建“＆lt; div ...”，我必须创建一个画布并从所选文件夹中设置背景图像。

创建这些元素取决于所选文件夹内的图像数量。所有图像都应显示为画布的背景。每个画布只有一个图像。

我想只使用这些东西来做：

1. HTML5
2. CSS3
3. 的jQuery

我该怎么做？

Answer 1

您可以轻松地使用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)'});                   
});

请参阅fiddle

在服务器端，您应解析文件夹并找到一些图像，然后使用Ajax调用脚本。 如果是的话，我可能会误解你的问题，请发表评论。

注意：我正在使用jQuery的最新版本。