javascript - 如何创建谷歌图片引擎效果？

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。

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

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

链接：这里

使用我的来源作为起点。

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

链接：这里