jquery - 网页设计理念 - 单击图像使用 jquery 转换为背景图像？

Question

我有这个想法。在网页设计中，单击图像后我希望它与背景合并(以洗掉水印的方式)。本质上是从 img 开始，它必须转到背景图像。这可以用 jquery 实现吗？

我能想到的一个解决方案是首先显示背景图像和正面图像(因此背景洗掉的图像最初隐藏在主图像后面)。单击正面图像后，通过 jquery 效果使其慢慢淡出不透明度，甚至消失为背景图像。

我希望这是有道理的？您有其他建议来实现这种效果吗？

非常感谢任何见解...

公斤

Answer 1

我看到的图像隐藏的预制背景的唯一问题(顺便说一句，这非常聪明)是，您必须竭尽全力确保图像与隐藏的图像完美对齐背景。此外，预先制作背景图像也不是很灵活。如果您想添加更多图像等怎么办？

我认为 ryanulit 的建议非常完美，但它假设您想要用单击的图像替换整个页面背景。如果我正确地理解了您的想法，您希望图像成为现有背景的一部分。

因此，您可以使用他的代码来实现这一点，首先将 img 元素的高度和宽度设置为图像的高度和宽度，然后将图像的 src 设置为透明像素。

var clear_pixel = "images/empty.png";
$("#clicked_image").click( function() {
     var image_src = $(this).attr("src");
     $(this).css("height", $(this).height());
     $(this).css("width", $(this).width());
     $(this).css("background-image", "url(" + new_bg + ")");
     $("this").attr("src", clear_pixel).fadeTo(5000,1);
});

这样，当图像淡入透明像素(或者可能稍微不透明的像素以添加整洁的水印色调)时，下面的新背景图像就会显露出来。

唯一的缺点是图像并不是真正背景的一部分，就像您所建议的那样，它只是看起来是 body 背景的一部分，但实际上是图像背景。

如果你只是想要效果，我认为这应该可以。如果您希望用户可以选择保存整个新背景，您可能会不得不预先制作背景(或使用一些非常奇特的 ajax 和服务器端图像创建库)。