1
我在想如何在浏览器中制作一些很酷的图像效果,而且我知道可能有点迟,因为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);
}
}
在顶部图像仅仅是一个,在底部图像是一系列1px的高大的div。
PS与浏览器缩放有关。
我真的不明白为什么。 '
是的,
@Orbit够公平的。我认为这是可能的,尽管相对较慢和耗费内存(但您已经意识到这一点)。但是,核心问题是如何用真实图像数据初始化事物?如果没有'',我不能看到这样做的方法,只是有一个服务器端工具准备JS。相关:http://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-colour-of-pixel-under-mouse-cursor –
2011-03-10 23:06:21