Question

我正在考虑如何在浏览器中制作一些很酷的图像效果，我知道用HTML5 / CSS3来推动这一思路可能有点晚了，但我想知道它的固有局限性是什么/问题点将实现一个库，该库基本上创建了div，每个div使用背景偏移来保持图像的像素。很明显，这将创建许多div，但如果你只想在小图像上使用行或列，那么这似乎不合理。使用浏览器缓存图像，不必为每个段创建请求，我可以看到的唯一其他潜在问题是定位的处理，我认为这不会是一个问题。在这一点上，我真的没有任何东西可以阻止它继续玩这样的图像（所以我会！），但我很好奇，如果有任何我在这里可以忽略的东西会让这个想法变得不可行，尤其是我应该知道的任何棘手的事情。谢谢:)）

编辑：试过这个，似乎我的代码中存在固有问题或问题（抱歉很糟糕，只是在玩耍），使用任何图像，你会看到差异。

var lpath = "images/logo.png"
window.onload = function(){
    console.log('test');
    $('body').append("<img id='logo' style='display:none' src="+lpath+">");
    console.log($('#logo').width());
    console.log('hello');
    var logod = $('<div></div>')
                                .addClass('i')
                                .width($('#logo').width())
                                .height($('#logo').height())
                                .css('background-image','url('+lpath+')')
    $('body').append(logod);
    for(var i = 1; i <= $('#logo').height(); i++){
        var cons = $("<div></div>")
                                .height(1)
                                .width($('#logo').width())
                                .css('background','url('+$('#logo').attr('src')+') no-repeat 0 ' + (-i));
        $('body').append(cons);
    }                                                                 
 }

enter image description here

顶部的图像只是一个，底部的图像是一系列1px高的div。

PS与浏览器缩放有关。

Answer 1

可能很慢。如果你很聪明，你只能根据需要进行拆分，因此浏览器可以处理的div更少。我相信你可以做到这一点，它可能很有趣。

将图像分割成像素div

1 个答案: