网页图片效果 - 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的演示。