2013-04-17 28 views
2

我一直在考慮看看這個WordPress主題懸停DIV幻燈片鼠標懸停效果:http://themes.thunderbuddies4life.com/?theme=longwave_wp如何實現其中從側面

當瓷磚懸停它似乎是一個半透明的DIV滑過從瓦邊緣鼠標進入。我認爲可以使用單獨的div,但我不確定它是如何通過查看頁面源獲得的。

我用html和css很不錯,但是我的jQuery很基礎。我知道這是有點開放式的,但對所涉及技術的簡要解釋會有幫助。


編輯:關於它的思考,沒有鑽研的頁面的源代碼,這是我怎麼想的辦法可能的工作:

  1. 每瓦都有它自己的半透明疊加孩子的div與它等稱號
  2. 每個覆蓋div位於瓷磚div的外部某處。該瓦片具有overflow:hidden
  3. 當鼠標懸停使用jQuery制定股利鼠標進入哪一方
  4. 我再申請一個CSS類覆蓋DIV(如何?):無論是頂部底部left or right。 CSS將啓動立即將疊加div定位在tile div的對應邊緣之外。
  5. jQuery然後使用動畫偏移疊加div以將其移動到拼貼上的位置。

這些圖塊將被動態調整大小,因此需要根據圖塊大小重新定義偏移量。

+0

有趣!一開始,每個瓷磚都有自己的半透明的div –

+0

是的,以及PSCoder認爲在懸停時追加()div是個好主意。然而,我們然後面臨的問題,具有正確的標題,標籤等div。下一個棘手的位將讓div滑入和滑出 – harryg

回答

3
+0

輝煌!謝謝,我稍後會給它一個bash。你的CSS看起來不錯,但是:1.疊加層不會像鼠標那樣退出; 2.疊加層是否可以包含標題? – harryg

+0

太棒了!我知道我將如何獲得文本,但不使用css,只能在鼠標的同一側退出。 – seanjacob

0

第一個想法:在mouseenter上,你可以開始做數學運算,根據鼠標座標確定輸入邊緣。然後,當你知道,如果從上,右,下進入或離開鼠標就可以,他們利用這種執行必要的動畫