我一直在考慮看看這個WordPress主題懸停DIV幻燈片鼠標懸停效果:http://themes.thunderbuddies4life.com/?theme=longwave_wp如何實現其中從側面
當瓷磚懸停它似乎是一個半透明的DIV滑過從瓦邊緣鼠標進入。我認爲可以使用單獨的div,但我不確定它是如何通過查看頁面源獲得的。
我用html和css很不錯,但是我的jQuery很基礎。我知道這是有點開放式的,但對所涉及技術的簡要解釋會有幫助。
編輯:關於它的思考,沒有鑽研的頁面的源代碼,這是我怎麼想的辦法可能的工作:
- 每瓦都有它自己的半透明疊加孩子的div與它等稱號
- 每個覆蓋div位於瓷磚div的外部某處。該瓦片具有
overflow:hidden
- 當鼠標懸停使用jQuery制定股利鼠標進入哪一方
- 我再申請一個CSS類覆蓋DIV(如何?):無論是頂部,底部 ,left or right。 CSS將啓動立即將疊加div定位在tile div的對應邊緣之外。
- jQuery然後使用動畫偏移疊加div以將其移動到拼貼上的位置。
這些圖塊將被動態調整大小,因此需要根據圖塊大小重新定義偏移量。
有趣!一開始,每個瓷磚都有自己的半透明的div –
是的,以及PSCoder認爲在懸停時追加()div是個好主意。然而,我們然後面臨的問題,具有正確的標題,標籤等div。下一個棘手的位將讓div滑入和滑出 – harryg