网页图像效果 - JavaScript ?能怎样？答案

【问题标题】：Web page image effects - JavaScript ? how else?网页图像效果 - JavaScript ?能怎样？
【发布时间】：2009-07-13 19:12:12
【问题描述】：

我要求挑选所有网络专家的大脑。

我有一个想法正在尝试实施。

我想在屏幕上显示六张图片，比如圆形，当我将鼠标悬停在一张图片上时，它会从灰色和白色渐变为全彩色，甚至可能会变大一点，或者生成一个当鼠标悬停在它上面时会保持阴影效果。

虽然我在 VB6 和 SQL Server 上并不太寒碜，但我的 Web 开发经验可以扩展到使用记事本生成原始 HTML 以在 Active Desktop 中显示一些喜欢的文件夹、网站和文档的链接等。

各位，我应该查看哪些编程资源网站，例如 w3schools.com，特别是我是否应该使用 JavaScript 或其他方法……以及查看特定的方法调用会很好。

我不是在追求“这里...试试这个代码”，然后是 10 屏幕代码来剪切和粘贴，我追求的是提示，例如“对于定位，请查看 www.thiswebpage.com 并查看在 XYZ”和“对于淡入淡出效果，请查看 JavaScript 上的 ABC 方法”或其他任何内容。

提前感谢大师。

编辑：14/07/2009 - 只是认为这可能是相关的。我将在 Google Apps 托管网站上托管这些页面。

此外，黑白渐变效果并不是我考虑的唯一效果，它只是一种可能性。其他不错的、微妙的效果也可以考虑。

【问题讨论】：

【解决方案1】：

您想要实现的东西应该没有那么难。但是，如果您不了解任何 JS，那么 W3C 学校是一个不错的起点。

您还应该查看Mootools。它是满足您所有 JS 需求的绝佳框架。他们也有一些很棒的demos you can try。

【讨论】：

【解决方案2】：

对于此类用户体验的一般效果和起点：JQuery

从那里 - 研究做这种事情的 jQuery 插件。好的搜索词可能是轮播。

【讨论】：

【解决方案3】：

Raphaël 是一个非常好的 Javascript 库，它可以做任何你想做的事情。例如，他们有 drop shadows on images 和 image rotation 的演示。

【讨论】：

【解决方案4】：

对于这种类型的工作，我喜欢使用Scriptaculous。它有许多易于使用的动画命令。您可以在 DIV 上并行运行一堆效果，因此您可以轻松地对同一个对象执行 MOVE 和 SCALE 效果并处理同步。

您可以使用常规的旧 JavaScript 完成所有这些操作。

这是一个 MOVE 示例：

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

【讨论】：

【解决方案5】：

通过使用一些可以很好地为 CSS 属性设置动画的 JS 库，您可能会获得非常相似的效果。例如 Scriptaculous 和 jQuery 可能适合该任务并且应该易于学习。

基本想法是您在 div 中有一个图像。图像的透明度可以设置为 0.5，因此 div 的背景颜色会通过它进行着色。这样，您可以在正确选择背景的情况下获得类似于黑白图像的效果。

如果您想要精确的黑白效果或类似效果，则必须生成图像的黑白版本，或使用 HTML5 画布元素手动将颜色转换应用于图像。不过，这不适用于旧版浏览器和 Internet Explorer。

【讨论】：

【解决方案6】：

【讨论】：

【解决方案7】：

您将需要某种形式的 Javascript，如果我这样做，我会查看 Script.aculo.us 库。（使用 CSS 可以立即产生效果，但要逐渐淡出，则需要 Javascript。）

【讨论】：

对于它的价值，一些新的浏览器有 css 动画。根本没有任何 JavaScript，您可以让它们在 IE 中“流行”，并在更好的浏览器中流畅运行。这适用于人们关闭 JavaScript 的情况。
它们能做到彗星想要的淡化效果吗（黑白到彩色）？