Question

我正在尝试创建谷歌图像引擎效果，当用户悬停图像时显示图像信用（放大图像并显示信用）。我不知道如何弹出图像并忽略内容的流动。

我知道灯箱会做类似的效果，但我只需要一个简单的悬停并显示图像信用效果。我有搜索谷歌，我得到的是像灯箱一样的弹出插件。我想知道是否有人给我指导或教程？非常感谢。

Answer 1

这将显示一个div浮动在图像的div容器上方。

<div id="yourImage1Parent"><img id"yourImage1" src="yourImage1src.jpg" /></div>
<script type="javascript/text">
 var credits = document.createElement("div");
 credits.style = "position: absolute; height:25px; width: 25px";
 credits.innerHTML = //load credits from ajax or array or logic, maybe from data-attribute
 document.getElementById("yourImage1Parent").appendChild(credits);
</script>

然而，这很简单。它需要连接一个事件来控制该元素的查看和元素的移除。由于示例中没有实际代码，因此此代码只是一个示例。

Answer 2

我创建了一个放大图像并显示框的基本示例。为了使这成为一般解决方案，需要一些更好的JavaScript。

我创建了一个包含具有相同图像的img元素的不可见div。在原始img元素的onmouseover事件中，我启动一个计时器，它显示带有重复img元素的div。显示div时，启动另一个计时器。当计时器触发时，我改变了div的大小和位置以及div中图像的大小。通过使用CSS3 Transistions，浏览器将自动将大小更改为一个看起来像缩放的动画。

我在Chrome中测试了我的代码，但它也应该在Firefox和Opera中运行。 IE不会显示动画。

链接：Here

以我的来源为出发点。

编辑：我编写了一个更好的代码版本，该代码可以获取具有 thumb 类的所有图像并使其缩放。这个版本比旧版本复杂一点。再次，看看源代码，并随时在下面的评论中提问。

链接：Here

如何创建Google图像引擎效果？

2 个答案: