我正在看谷歌搜索頁面上的JavaScript圖片控件,我想知道如何複製它。我可以看到它打開了一個圖片上的熱門,但我不能找到他們在HTML中使用的代碼。今天的Google圖片控件如何工作
有人可以幫助我。
我正在看谷歌搜索頁面上的JavaScript圖片控件,我想知道如何複製它。我可以看到它打開了一個圖片上的熱門,但我不能找到他們在HTML中使用的代碼。今天的Google圖片控件如何工作
有人可以幫助我。
我剛剛回復了一個類似的問題@Jquery Image popout on hover - 我的回答是一個CSS3的例子。
多數民衆贊成在很好,但沒有任何人知道如何谷歌做到了 – Nelson 2010-12-23 18:49:57
看看源:
<div id="hplogo-..." style="background-color: rgb(153, 77, 51); position: absolute; width: 201px; height: 121px; left: -28px; top: 31px; z-index: 17;">
<div style="overflow: hidden; top: 6px; left: 6px; position: absolute; height: 109px; width: 189px; ">
<a href="https://stackoverflow.com/search?q=...">
<img src="/logos/..." border="0" style="position: absolute; left: -1px; top: -110px; ">
</a>
</div>
</div>
第一<div>
位置圖像並增加了一個背景顏色。第二個<div>
隱藏了溢出,以避免圖像突然出現,並放置在距離第一個div的6個像素處,從而創建一個邊框。最重要的是,圖像被放置,並且因爲它是一個精靈,它有一些偏移量。
將第一個div懸停將改變前兩個div的寬度和高度,並將重新定位第一個div。
這個問題現在完全沒用。你在說什麼圖片? – TRiG 2011-02-08 17:18:25