需要想法只显示一些像素并将剩余像素变灰

发布于 2024-11-06 16:20:03 字数 278 浏览 0 评论 0原文

我正在寻找想法...为客户集思广益一个新项目...我有一张图像...300px x 300px ...我需要一次随机显示一个像素，直到整个图像显示完毕揭示了。

基本上，在一定的时间间隔内，一个像素会被显示并保持显示状态，而其他像素仍为空白。在每个时间间隔，随机显示另一个像素，并保持显示状态以加入其他显示的像素。最终，所有像素都会被揭示。

关于如何实现这一点有什么建议吗？

我可以制作大量图像副本并手动显示一个随机像素，但肯定可以通过编程来完成:)

哦，它不能是任何形式的闪存。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何处潇湘 2024-11-13 16:20:03

编辑：我意识到我误解了你需要做什么，但我认为这很酷，并且可以应用于你的问题...

查看以下内容的工作演示 →

我将其放在 jQuery 中。我实际上将每个像素制作为 3x3 框，因为否则处理时间会太长。尽管我还没有测试过 IE，但似乎在客户端的某些方面工作得很好。

<div id="w">
    <img id="i" src="yourImage.jpg" width="300" height="300" />
</div>

$('#w').css({
    width: $('#i').width(),
    height: $('#i').height()
});

var htmlFrag = '',
    id, ids = [],
    removePix = function () {
        if (ids.length) {
            var rand = Math.floor(Math.random()*ids.length);
            $('#'+ids[rand]).fadeOut(function(){
                $(this).remove();
            });
            ids = ids.slice(0, rand).concat(ids.slice(rand+1));
            setTimeout(removePix, 1);
        }
    };

for (var i = 0, len = $('#i').height(); i < len; i += 3) {
    for (var j = 0, len = $('#i').width(); j < len; j += 3) {
        id = 'pix'+j+'-'+i;
        ids.push(id);
        htmlFrag += '<div id="'+id+'" class="pix" ' +
                    'style="width:3px;height:3px;position:absolute;' +
                    'left:'+j+'px;top:'+i+'px;"></div>';
    }
}

$('#w').html($('#w').html() + htmlFrag);

removePix();

查看工作示例→

EDIT: I realize I mis-interpreted what you needed to do, but I thought this was cool anyway and could be applied to your problem...

See working demo of the following →

I threw this together in jQuery. I made each pixel actually a 3x3 box instead because otherwise it would take way too long to process. Seems to work pretty well for something on this in client side, though I haven't tested IE yet.

<div id="w">
    <img id="i" src="yourImage.jpg" width="300" height="300" />
</div>

$('#w').css({
    width: $('#i').width(),
    height: $('#i').height()
});

var htmlFrag = '',
    id, ids = [],
    removePix = function () {
        if (ids.length) {
            var rand = Math.floor(Math.random()*ids.length);
            $('#'+ids[rand]).fadeOut(function(){
                $(this).remove();
            });
            ids = ids.slice(0, rand).concat(ids.slice(rand+1));
            setTimeout(removePix, 1);
        }
    };

for (var i = 0, len = $('#i').height(); i < len; i += 3) {
    for (var j = 0, len = $('#i').width(); j < len; j += 3) {
        id = 'pix'+j+'-'+i;
        ids.push(id);
        htmlFrag += '<div id="'+id+'" class="pix" ' +
                    'style="width:3px;height:3px;position:absolute;' +
                    'left:'+j+'px;top:'+i+'px;"></div>';
    }
}

$('#w').html($('#w').html() + htmlFrag);

removePix();

See working example →

回复收藏 0 原文

清引 2024-11-13 16:20:03

将图像文件加载到图像资源中 (imagecreatefrompng, < a href="http://www.php.net/manual/en/function.imagecreatefromgif.php" rel="nofollow">imagecreatefromgif 等）。
使用 rand() 或您想要选择的方式决定要显示哪些像素。
循环图像中的每个像素，如果不是您选择显示的像素，则使用 imagesetpixel。