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

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不会显示动画。

链接： 这里

使用我的来源作为起点。

编辑：我已经编写了一个更好的代码版本，它采用了具有类拇指的所有图像并使它们变焦。 这个版本比旧版本复杂一点。 再次，看看源代码，并随时在下面的评论中提问。

链接： 这里