逐张显示图片 [英] Reveal a picture piece by piece

问题描述

我正试图逐张展示一张图片.我在这里需要仅显示一些像素并使其余像素变灰的想法，而mVChr给出了很好的答案.这几乎是我要寻找的，但是我想将显眼的部分变大，因此花费更少的时间完全看到图像. 我必须在代码中适应什么? 有人可以帮助我吗? 非常感谢您的努力

I am trying to reveal a picture piece by piece. I found this thread here need ideas to only display some pixels and gray out the remaining pixels, with an excellent answer from mVChr. This is almost what I'm looking for, but I would like to make the revealing pieces larger, so it takes less time to completely see the image. What do I have to adapt in the code? Anybody able to help me? Thanks a lot for the effort

推荐答案

您需要更改两件事.

首先是灰色框的大小.就是这样

First is the size of the grey boxes. That is done with this

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循环，以使框匹配

Then you need to change the for loop that puts the boxes in to match

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) {

这里是示例！

这篇关于逐张显示图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！