如何創建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不會顯示動畫。

鏈接： 這里

使用我的來源作為起點。

編輯：我已經編寫了一個更好的代碼版本，它采用了具有類拇指的所有圖像並使它們變焦。 這個版本比舊版本復雜一點。 再次，看看源代碼，並隨時在下面的評論中提問。

鏈接： 這里