網頁圖片效果 - JavaScript？能怎樣？

Question

我要求挑選你所有網絡專家的大腦。

我有一個想法，我試圖實現。

我想在屏幕上顯示半打圖片，比如說一個圓形，當我用鼠標將鼠標懸停在一個圖標上時，它會從灰色和白色變成全綵色，甚至可能變得稍大一些，或者生成鼠標懸停時留下的投影效果。

雖然我對VB6和SQL Server並不太破舊，但我的Web開發經驗延伸到使用記事本生成原始HTML以在Active Desktop中顯示一些常用文件夾，鏈接到網站和文檔等。

所以，球員，什麼編程資源網站，我應該看，如w3schools.com和具體我是否應該使用JavaScript或其他方法......還具體方法調用來看看將是一件好事。

我不是之後「這裏...試試這個代碼」，然後代碼10米的屏幕剪切和粘貼，我建議以後很，如「爲定位，看www.thiswebpage.com和看看XYZ「和」淡入淡出效果，看看ABC的JavaScript方法「或其他。

在此先感謝大師們。

編輯：14/07/2009 - 只是認爲這可能是相關的。我將在Google Apps託管網站上託管這些網頁。

此外，黑色和白色的淡入淡出效果不是我考慮的唯一效果，這只是一種可能性。其他好的，微妙的影響可能會被考慮。

Answer 1

你想實現的東西不應該那麼困難。但是，如果你不知道任何JS，那麼W3C學校是一個很好的開始。

您也應該檢查出Mootools。它是您所有JS需求的絕佳框架。他們也有一些偉大的demos you can try。

Answer 2

您將需要某種形式的Javascript，如果我這樣做，是我會看Script.aculo.us庫。 （可以用CSS完成即時效果，但對於逐漸淡入，您將需要使用Javascript。）

Answer 3

對於那種類型的工作，我喜歡使用Scriptaculous。它有許多易於使用的動畫命令。您可以在DIV上並行運行一組效果，因此您可以輕鬆地在同一個對象上執行MOVE和SCALE效果，並處理同步。

你可以用普通的舊JavaScript來完成這一切。

這裏是一個MOVE的例子：這種類型的用戶體驗

new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' }); 

Answer 4

對於一般的效果和出發點：JQuery

從那裏 - 研究的jQuery插件，做這種類型的東西。良好的搜索條件可能是旋轉木馬。

Answer 5

你可能會得到一個非常相似的效果，通過使用一些可以很好地動畫CSS屬性的JS庫。例如Scriptaculous和jQuery可能適合這個任務，應該很容易學習。

基本的想法是，你有一個div中的圖像。圖像的透明度可以設置爲0.5，所以div的背景色可以透過它。這樣，您可以通過正確選擇背景來獲得類似於黑白圖像的效果。

如果您想要精確的黑白效果或類似效果，您必須生成圖像的黑白版本，或使用HTML5 canvas元素手動將顏色變換應用於圖像。但是，這在舊版瀏覽器和Internet Explorer中不起作用。

Answer 6

1. 瞭解JS，你可以從中學到http://www.w3schools.com/JS/default.asp
2. 語法展開這方面的知識與知名作家的文章，像Crockford。
3. 通過學習一個領先的框架（我喜歡Mootools）來完成這一切。
4. 在做1-3步驟編碼，編碼和做更多的編碼時。

Answer 7

Raphaël是一個非常好的Javascript庫，可以做你想做的一切。例如，他們有drop shadows on images和image rotation的演示。