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

Question

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

我想动态创建"<div.."s，在每个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)'});                   
});

参见小提琴

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

注意：我使用的是jQuery的最后一个版本。