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

Question

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

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

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

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

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

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

在此先感谢大师。

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

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

score 3 · Accepted Answer

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

您还应该查看Mootools。它是满足您所有 JS 需求的绝佳框架。他们也有一些很棒的演示，你可以试试。

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

Raphaël是一个非常好的 Javascript 库，它可以做任何你想做的事情。例如，他们有在图像上带有阴影和图像旋转的演示。

score 0 · Accepted Answer

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

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

下面是一个 MOVE 示例：

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

score -1 · Accepted Answer

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

7 回答 7