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

Question

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

我想在每个 div 中动态创建“<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。