如何創建Google圖像引擎效果？

Question

我想創建谷歌圖像引擎的效果，顯示圖像信用時，用戶懸停的形象（放大圖像和顯示信用）。我不知道如何彈出圖像並忽略內容流。

我知道燈箱會做類似的效果，但我需要的只是一個簡單的懸停和顯示圖像信用效果。我搜索谷歌，我得到的都是像lightbox一樣的彈出式插件。我想知道是否有人給我一個方向或教程呢？非常感謝。

Answer 1

我創建了一個放大圖像並顯示框的基本示例。爲了使這是一個通用的解決方案，需要一些更精細的JavaScript。

我創建了一個不可見的div，其中包含一個img元素和相同的圖像。在原始img元素的onmouseover事件中，我啓動了一個計時器，它顯示帶有重複img元素的div。當div顯示時，另一個計時器啓動。當定時器觸發時，我更改div的大小和位置以及div中圖像的大小。通過使用CSS3 Transistions，瀏覽器將自動將大小更改爲看起來像縮放的動畫。

我已經在Chrome中測試過我的代碼，但它也應該在Firefox和Opera中運行。 IE不會顯示動畫。

鏈接：Here

使用我的源作爲起點。

編輯：我寫了一個更好的版本這需要有類大拇指所有圖像，使它們放大的代碼。這個版本比舊版本更復雜一些。再次，看看源代碼，隨時在下面的評論中提問。

鏈接：Here

Answer 2

這將顯示浮動在圖像的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> 

但是，它很簡單。它需要一個事件來控制觀察這個元素和移除元素。由於沒有例子的實際代碼，這個代碼只是一個例子。