jquery - 逐张揭晓图片

Question

我试图一点一点地揭示一张图片。我在这里找到了这个帖子need ideas to only display some pixels and gray out the remaining pixels ，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) {

Here's the example !