javascript - 首页设计: dynamically moving and expanding images

Question

我正在尝试更新我的初创公司的网站主页，但我的编程知识仅限于 HTML、CSS 和一点点 jQuery，我正在尝试了解 HTML5(我也可以阅读~ish Javascript ，但通常不会取得巨大成功...)!因此，我来​​找您寻求解决方案。

下面是(附上图片):

• 标志就在这里，不用碰它 ;)
• 我需要的是让 smallbox.png(上面写着一些“CAR”)在鼠标悬停时发光(我得到了 smallbox_glow.png)
• 然后在点击时移动到页面中间 (1)(仍然是相同的图像，上面写着汽车)
• 然后自动使文本淡出，扩展到大框 (2) 中并让一些不同的文本(..关于汽车)淡入。

这是不可能做到的，还是 2 行或代码就能使它起作用？我有点被困在这里......

我愿意(并且有兴趣!)学习不同的编码语言，所以如果有必要，请抛开复杂性 =)

图片:

此处:http://i.imgur.com/0IWzQ.png

提前致谢!

Answer 1

我 100% 同意 Anthony 的观点...这里有一些帮助您入门的建议。

根据您的用例

1. 我需要的是让 smallbox.png(上面写着一些“CAR”)在鼠标悬停时发光(我得到了 smallbox_glow.png)
2. 然后在点击时移动到页面中间 (1)(仍然是相同的图像，上面写着汽车)
3. 然后自动使文本淡出，扩展到大框 (2) 中并让一些不同的文本(..关于汽车)淡入。

一些思考:

1. 这可以单独通过 CSS 完成，使用背景图像作为 anchor ，并通过 a:hover 和/或 a:active 等进行更改。如果您显示的是纯文本，请考虑使用“text-shadow "用于发光效果和 modernizer.js 用于跨平台兼容性。

2. 这可以使用 HTML Canvas 或 jQuery's animate api 来完成.

3. jQuery offers various fade effects

由于我们在某些时候都是新手，请不要羞于发布您的信息，因为我们可以更好地帮助您解决任何问题。

祝你好运。