jquery - 逐张显示图片

Question

我正在尝试逐张展示图片。我发现这里的这个线程需要一些想法来只显示一些像素并将剩余的像素变灰，mVChr 给出了一个很好的答案。这几乎是我要找的，但我想让显露的部分更大，所以完全看到图像需要更少的时间。我必须在代码中适应什么？有人能帮帮我吗？非常感谢您的努力

Answer 1

你需要改变两件事。

首先是灰色框的大小。这是用这个完成的

htmlFrag += '<div id="'+id+'" class="pix" ' +
            'style="width:3px;height:3px;position:absolute;' +
            'left:'+j+'px;top:'+i+'px;"></div>';

变成这样

htmlFrag += '<div id="'+id+'" class="pix" ' +
            'style="width:10px;height:10px;position:absolute;' +
            'left:'+j+'px;top:'+i+'px;"></div>';

然后您需要更改将框放入匹配的 for 循环

for (var i = 0, len = $('#i').height(); i < len; i += 3) {
    for (var j = 0, len = $('#i').width(); j < len; j += 3) {

变成

for (var i = 0, len = $('#i').height(); i < len; i += 10) {
    for (var j = 0, len = $('#i').width(); j < len; j += 10) {

这是示例！

Answer 2

这是 corsiKa的一个分支，其中包含一些 mod，其中最重要的是删除像素的方式，允许指定时间段。

也避免了像素具有 id 的需要，因此 HTML 更简单。