CSS3 Clock With jQuery

Analogue Clock

3D Cube That Rotates Using Arrow Keys

Multiple 3D Cubes (Slide In/Out)

CSS3 Accordion

Auto-Scrolling Parallax

Isocube

Image Gallery

Matrix

7 Javascript-effect Alternatives Using CSS3

Image Hover Effects

Turning Coke Can (Control With Scrollbar)

3D Meninas

Polaroid Gallery

Space

Note: this one is graphic intense and takes a while to load, but the result is crazy!

Mac Dock

Drop-In Modals

Sliding Vinyl

Zooming Polaroids

Animated Rocket

Poster Circle

Morphing Cubes

Falling Leaves

Animated Polaroid Gallery

Spotlight Cast Shadow

Colorful Clock

Lightbox Gallery (Draggable)

Elastic Thumbnail Menu

Coverflow

Snowflakes

jQuery DJ Hero

Dynamic Stacking Cards

Another Image Gallery

Snow Stack (Control With Arrow Keys)

Animated Pricing Column

Slick jQuery Menu

CSS3

CSS Tabs Without Javascript

Tab Menus Without Javascript

SVG Fisheye Menu

Dynamic Presentation Without Flash

Rotating Gallery

Dropdown Menu

Another Fisheye

Frame-by-Frame Animation (Hover to Play)

Another Accordion

AT-AT Walker (No Flash or Javascript)

翻译自：47 Amazing CSS3 Animation Demos
中文原文：47 个惊人的CSS3动画演示
请尊重版权，转载请注明来源，多谢！

接下来我会给大家列一些要点，并附上相应的例子，与大家分享一下我在别人的网页设计中寻找“高品质”的过程。

01. 留白

在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。

我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。

出色的留白处理的实例

Good.is

页面整洁而有开放感，全都得益于设计师对文字和图像之间留白量的准确把握。

Digital Mash

在大空白上展示的元素往往更具吸引力。Digital Mash的网站创造了极佳的亲和力。

Creatica Daily 的大量空白

优秀的留白运用又一次让网页内容成为焦点。每篇文章中都有大量内容，不过该站点的设计师们并不惮于给这么多内容之间填上大量留白。并不是说你的文字不够多，就不能用很多留白。

Postbox 上也有很多空白

仔细观察Postbox的网站，你能看到边缘处的留白应该如何处理。它的方框边缘有60像素的边内留白。听起来似乎挺大的，实际看起来效果却好极了。

留白时的错误

大家在设计留白时的最常见问题就是各个区块的内容到边缘距离太小。不论你的设计多么有风格，如果你硬要把东西塞得紧紧的，这些风格连同设计的品质，就都流失了。

留白不够的例子

我们已经看到PostBox的网站那些大留白创造了多么动人的效果，所以下面我们修改一下它的页面，看看减少留白会是什么效果：

品质感明显下降了。留白的影响就有这么大。

高效控制留白的技巧

各种不同情况下，留白要求都不尽相同。你需要不断训练自己，做到对留白所能带来的改变时刻心中有数，从而有效地利用留白满足设计需求。这要靠个人感觉的，不过都能从实践中锻炼出来。

• 使用网格辅助设计
  利用网格当然能帮助你理解元素之间的空白。
  
• 不断尝试
  不断尝试—失败—尝试，直到找到最佳方案。
  
• 留白并不是浪费空间
  空白并不总是等着你去填充的。
• 没错，少就是多
  与其用尽心思填满某个区域，不如就把它留空，只保留至关重要的信息就好。

02.  像素级的完美

有一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节，一些别人几乎无法察觉的细节。我所说的“像素级的完 美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线，不如多加一些细节。细节可以是细微的渐变，也完全可以只是一条1像素宽的细线（用作表现阴影或高光）。有了这些细节， 你的设计会大不一样。有些设计师在这方面特擅长： Collis Ta’eed, David Leggett 以及 Wolfgang Bartelme.

像素级完美细节的实例

Envato的细节鉴赏

下图的Example 1 (例子1)中，绿色内容框的边缘有一条更亮的绿色线。而Example 2处，区块内边缘有柔和的渐变阴影，而边缘之上还有一像素的白色描边。这做法非常聪明，用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果，有助于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。 尽管这种做法并不是总能让设计看起来更加精致，不过它们的确能帮助你赋予设计以三维的真实感。于是设计元素就成了镶嵌在页面上的宝石，而不是平铺在上面的一张毫无动感的纸。

Tutorial9.net上的细节

David Leggett 对于如何制造 单像素顶边条 有很深的理解。他最近重新设计的 tutorial9 集合了很多非常棒的像素化技巧。 Example 1 处你能看到，他是如何仅仅通过添加一条1像素的高光，而将导航标签变得更有质感。Example 2 处使用的技巧则更多了。相机图标的投影，下方白色区域的阴影与高光，以及导航条上的1像素高光。

RedBrick Health上 按钮和分割线上的完美像素级细节

这个漂亮的导航菜单，由Ryan Scherf 创造，是使用完美像素级细节提升设计品质的绝佳实例。红色按钮有1像素的高亮，链接之间的分割线也有同等的品质与细节。正如你所看到的，他没有满足于只用一条灰色线分割，Ryan还在下面添加了一条1像素宽的高光线，避免了设计看起来过于平坦。

完美像素级细节也适用于Grunge风格: AvalonStar

译注：Grunge风格有“做旧”、“迷幻摇滚”、“做脏”等几层意思在里面，算是平面艺术中的一个流派。

下面的例子是漂亮的AvalonStar：Distortion（扭曲）主题博客，有着极赞的grunge风格。不过，即便是肮脏做旧的grunge风，利用1像素高光也能创造大不同。下图的Example 1 处，上面的棕色区域有一个渐变阴影，下面的绿色区块的顶部则有着一条1像素高亮线。阴影与1像素线的结合，让这些区块显得更为精致。

完美细节小贴士

要在这一技巧上达到完美，不断的实践尤为重要。如您所见，一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变，费尽心力做一些实实在在的置于某对象之上的效果。

• 一定得是细节
  小细节完善内容感官是关键。
• 思考像素级问题
  描边、渐变、线条、阴影等等，不用太宽大也能有效增强设计
• 前后对比
  应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。

 

03. 文字排列与字体选用的诀窍

尽管设计师大都不会亲自撰写网站的实际内容，不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。有很多方法能保证你的字体易读易用，不过我不会给大家列一些该做什么或者不能做什么的规矩和条款，我带给大家的是一些聪明运用字体的实例和分析。

仔细考虑了字体的实例

The Netsetter上大而漂亮的字体

网页设计中，标题很重要，对于博客设计来说尤为如此。最近流行在标题上使用大而粗的字体。这样做有很多好处，不仅能提高特定内容区块的可用性，而且有助于组织设计中的空间和结构。 Netsetter 在这方面做得非常好，如您所见，标题字体很大，周围有大量留白，十分易读。

行间空白和字符间距

Viget 的网站是字体究竟对网页设计有多重要的完美实例。下面的截图来自他们的作品集展示页，再一次展示了大字体是如何帮助创建开放空间的。即使是这种清爽的细线体，他们也使用了宽阔的空白。另一个值得称道的地方是他们对于行高 (line height) [行间空白]的的绝妙选择。行间距被设定得比默认值大很多，大大增强了文字可读性。也许下次你可以在自己的设计中也试一试这个技巧。

Web Design Ledger, 配合情绪的字体

要找到完美的字体需要不断的尝试和失败，或者你还可以根据字体所代表的“情绪”来选择字体。下面的例子，Web Design Ledger， 在给人以复古和做旧感的同时，也饱含开放的情绪与现代感。他成功的关键就在于选择了能唤起人们相应情绪的字体。Henry Jones (该站的设计师) 为标题选择了一种流行的传统衬线字体：Georgia，为怀旧复古风的实现提供了很大裨益。现代感则来自与标题完全不同的字体——主内容使用的Helvetica字体，一种无衬线的、滑溜的、开放的字体。

网页设计中字体选用的快速决断

看了上面这么多好例子，将来你选用起字体来应该会更加得心应手。不过，为什么他们给人的感觉这么好？下一次在你自己的设计中，你又该如何运用？

• 是否可读？
  不要怕尝试粗大的字体
• 你可否考虑过间距？
  间距对于可读性有很大决定作用
• 你的字体带给人什么情绪？
  确保字体选择适合你的设计风格

这方面还有大量值得关注的地方，不过我不是这方面的专家，我也只是刚刚学会了如何鉴赏那些用得极好的字体而已。如果你想在这方面了解更多，强烈建议你看一下来自Smashing Magazine的这篇文章。

04. 元素的组织

设计师这一职业对很多人都有吸引力，因为那些制造创意的过程，实在是十分有趣。我知道组织内容的过程就没有那么有趣了，不过一旦你养成了组织内容的好习惯，你就会发现其实它也没有想象中那么枯燥。组织内容的方式总是需要看情况而定，比如说，这站点是什么类型？某项特定内容在页面上的重要性如何？

如何放置内容，以及放到哪里，可能的排列组合实在太多了。不过还是有一些技巧可循的。最基础的就是，先决定你的设计需要达到的效果。例如，你是在做卖东西的网站吗？是要做内容展示吗？或者是在做一个用户注册页？推广页面？等等……

靠设计做买卖: 37Signals

看看这个广受欢迎的 37 signals 的网站。他们的东西能卖这么好，可不是靠的运气。他们的网站让你尽可能容易地了解了他们的产品， 帮你做出最终决定。你所看见的东西都被精妙地设计而呈现。

如图中所示，他们提供了四大理由让你购买他们的产品。吸引注意力(Attention)是第一步，他们做了一个黑色区块，放上关于产品的简单介绍，并且使用了粗大的标题。 接着，他们通过一些漂亮的插画把你的兴趣(Interest)吸引到对产品优点的介绍上。再然后，他们想要让你产生购买需求(Desire)，这能通过放置客户评论引言和产品获奖证书来实现。在这一实例中，他们是通过几个“What our Customers have to say”（我们的客户如是说）的视频来实现的。最后要实现的即促成购买行动(Action)； 37Signals 的网站上有大量行动点(action points，即引导用户进行下一步操作的链接)贯穿于整个页面，由于页面很长，页面底部还放置了更多的行动点。

为内容(Blog)而设计: Well Medicated

设计博客页面时的情况则大不一样了。你不用花力气劝说你的用户信任你的产品，你的“产品”已经展示在他们面前—— 也就是你的博客内容。你要做的就是确保用户能轻松阅读你的文章，探索内容，与你和你的博客产生联系。

内容(Content) 应该是博客中出现在读者眼前的首要部分（之一）。在下面的例子中，一个粉红色粗体字的标题，很好地吸引了你的注意力，引导你直接关注文章内容。左侧放了张大小合适的预览图，右边则是两三段文章摘要，和一个“继续阅读”的链接。当然，也有标准的日期和作者信息。这简直就是我心目“内容设计”的完美实例。注意力(Attention) 可以被引导到任何有趣的事物上。在这个例子中，漂亮的RSS订阅按钮成为了焦点。且不说这个焦点让读者产生了与内容的联系感，它还能帮助网站获得更多的订阅量。鼓励你的读者探索你的内容相当简单，只需在边栏上加一些最新文章或最受欢迎文章的链接列表，或者制作一个下拉菜单，或者组织一个其他你想要推送的内容的高效列表。做起来很简单，效果却足够有效，尤其是对博客来说。博客是一个私人领地，通过不同的途径告诉读者你的联系方式(Connect) ，能帮助他们了解你，也说不定会带来意外的好处。

组织内容小贴士

你当然可能会遇到需要打破常规，选用非同寻常方式的时候，不过你还是可以遵循这些简单技巧，以保证内容结构和阅读顺序的良好。

• 你为何而设计?
  如前所述，确定设计的目标。
• 利用网格
  网格帮助你发挥页面的最大潜能。
• 测试元素位置
  以访问者的角度考察内容的易用性。
• 移除所有不必要元素
  不必要的东西都应该被消灭，或者至少不要放到显眼的地方
• 注意力的均衡
  有些东西需要被简单化，好让另外的事物闪耀光辉

05. 自我克制与精妙细节

设计师总是在寻找制造冲击力的方式，总是想做一个独一无二的设计，创造些前所未有的效果。不过有时候通过自我克制也能形成冲击力。量变产生质变，过多的“好”也会带出不好的结果。好的设计师晓得平衡点在哪里，并且能避免让过多的特殊效果毁了一项设计。

“Things”网站上的柔和渐变

对于我访问过的站点，我总是很关注他们的细微渐变。听起来可能有点恼火，不过我就是忍不住要去研究别人的那些小细节，以积累我将来设计时的灵感。渐变是最被滥用的设计方法之一，不过运用成功的话，还是能让设计增色不少，它所能提供的真实感和深度感是其他技巧所不能达到的。大部分人都不太注意渐变，不过别人对渐变的运用确实是我最好的灵感来源。

Icon Dock 上的投影

Icon Dock的网站简直就是各种精妙细节聚在一起开大会。像素级高光，渐变，以及投影。不过在这里我们只关注它的投影。不是很大，透明度也被调高，小心翼翼地烘托着内容区块，让其成为真正的焦点。实在漂亮~

精细的背景材质：Scouting for Girls

材质性背景要么成全你的设计，要么毁掉你的设计。很多复杂的背景除了分散读者注意力，没有带来任何好处。最终使得设计品质大为降低。所以，最好还是一直保持你的背景材质细微而柔和。 Scouting for Girls的网站在运用材质打造整体风格和设计品质方面做得极好。

做旧与撕碎的启发： Viget Advance

我从来不觉得越细微越好，任何细节的“细度”都以可见为前提。可能人们并没有清楚地意识到，不过这些细节必定确实产生了影响。博客Viget Advance的例子中，在做旧与撕碎效果方面，能给我们一点启发。 只是非常细微的做旧，不过如果没有这效果，这张人造纸就会显得平淡无奇，枯燥乏味了。正是这些小小的“不完美”让这画面显得更可信，更真实。

WebDesignerWall 上的水彩效果

使用水彩效果的时候，关键是要确保颜色混合得足够柔和，浓淡变化适宜，而且… 足够“水”。水彩效果为你的设计提供很多好处：精细而和谐的多种色彩，感染力极强的材质感…… 正因如此，越来越多的设计师选择了在他们的设计中创造水彩效果。

精妙的植物：Dara’s Garden

下面是一个充满智慧的关于精妙植物细节的设计。网上还有很多更加栩栩如生的植物图案，而且也非常漂亮，不过这个例子中，我关注的是背景上那些更清淡更微妙的细节。这个例子展现了细节的重要性，柔和的色彩，做旧的效果，唤起你对细节的感知，不过却并不形成为主要焦点。

运用精妙细节的小贴士

我认为，精妙细节能让一项好的设计升华为灿烂夺目的设计。如果你还在寻找让设计与众不同的方法，精妙细节是个不错的尝试方向。 以下是关于运用精妙细节的小贴士：

• 创建细节图层
  不要在一个笔刷或材质上吊死，多加些图层，多做点细节
• 尝试不同透明度和色彩
  有时候只有 3% 的不透明度也能产生正面影响
• 拒绝缩手缩脚
  不要担心太多细微，或者太不明显

 

06.  发挥色彩的全部潜能

设计师一般喜欢按照自己的品味来选择颜色，这可实在太不专业了。要决定哪种颜色是最适用的，你的脑子里想的应该一直是品牌需求，然后选好色彩的搭配组合，指定其专属的主题和目标情绪。

网页设计中色彩运用的绝妙例子

无趣并不代表无色：Oypro

Oypro的网站让我喜欢的地方是，他们告诉了我们，一项“无聊”的行业相应的设计并不一定也得“无聊”。通常企业的网站都不允许设计师有太多视觉创意上的发挥。保持简单、单调、淡彩色成了不成文的规定。不过Oypro的例子证明，不用束缚自己，你也能创造出一个有足够“企业感”的网站。

让色彩相互联系：Tennessee Summertime

Summertime in Tennessee(田纳西州夏日观光) 是一个充满活力的、明亮的，非常温暖的站点。所有一切看起来都是为了推送夏日活动而设计。该站点使用了非常多不同色相的高饱和度色，但每一种颜色都切中要害，没有一种是不适合主题的。高品质设计的色彩搭配必定与其要呈现的服务或产品密切关联。好的设计并不总是需要费尽心力选一些出奇制胜的颜色，那些最明显最该用的颜色反而能创造更好的效果。比如说 Hell Design(地狱设计)，不用象征地狱的火红色简直说不过去。

背景还可以大作文章：Saturized Studio

只涂一层单调的背景色可没法让你的设计变得有趣。有一点变化的背影才是最好的背景。此例中我们看到，漂亮的橙/红色被运用到各种各样的光照和渐变效果中。这种为背景增加变化的做法，有效避免了平淡和沉闷。另一个需要特别注意的地方是，暗深橙色背景与上层明亮内容区的对比产生了非常戏剧化的漂亮的视觉冲击。

在网页设计中运用颜色的小贴士

颜色永远是值得探索和尝试的区域。尝试不同的组合变化能为设计带来无限可能。不过选择颜色和色彩搭配时，应该做到对下面的要点心中有数：

• 尝试突破
  无趣的主题并不一定得使用无趣的色彩组合。
• 多变
  尝试在你多彩的背景上使用渐变、重复图案、笔刷，光有颜色可不容易让设计显得好看。
• 坚持主题
  确保你的用色与你需要呈现的产品/服务有关联。

 

07. 做别人没做过的事

最好的网站中有一些非同寻常的，奇怪的，甚至可以算得上诡异的设计。不过那些挑战传统的尝试说不定会已经改变了传统的定义。话说回来，要做到完全原创，创造出没人做过的东西实在是设计过程中最难做的事。

打破常规之后，成功与失败只有一步之遥。你要么做出令人惊艳的聪明设计，要么做出一堆垃圾饱受批评。别人从来不这么做是有原因的，因为有些点子实在是糟透了。要从人们知道并喜欢的区域走出来，你得非常勇敢才行。下面是一些相关实例：

MB Dragan 上的独特导航

不是你通常所见的站点导航，但看起来还是一个网站，同那些标准导航同样的好。这样做有点冒险，但结果非常符合该网站特质。十分切题的设计，很难让人不欣赏这导航与整个设计之间的配合呼应。

Visualbox(视觉盒子) 非常视觉化的导航

Visualbox的网站只有一个目标，向你展示他们充满智慧的作品。所以他们没有用多少文字，你第一眼看到的就是他们的名字和作品选集。 鼠标滑过预览图片时，会显示出项目名称，点击时会带你滑到页面中该项目的相应位置。这是非常高效而实用的解决方案，而且比简单地堆一个列表出来要吸引人得多。

废话不多说的Nikola Mircic

假设你是位交互设计师，你需要别人看了你的作品，能感动得雇用你。Nikola Mircic 为我们展示了“直截了当”对建造一个令人难忘的站点有多大的作用。一打开他的站点，各种风格的作品就向你问好，他的名字和职业放在页顶的醒目位置，当然，联系链接没少。没有大量多余文字来劝说你雇佣他，作品本身就证明了他的实力。当然，点击作品缩略图会出现一个详细介绍页，里面就有足够的文字了。实在喜欢他组织内容的方式。

实践新鲜想法的小贴士

上面的例子并不是为了“激发”你的独特创意，只是一些我发现的一些很独特的站点，仅此而已。事实上，你也不应该到处搜寻，寻找新想法的灵感，因为这样你的点子也是受别人的启发，与完全创新是相悖的。所以如果你打算做真的非同寻常的东西出来，就赶快忘掉这一部分！

• 保证事物之间的联系
  如果你打算做一些特别特别特立独行的事，先问问自己“真的有必要吗?”，“这样说得过去么？”，“和品牌诉求符合吗？”…… 如果答案是肯定的，再采取行动！
• 忘掉所有已知事物！
  好吧其实也并不是所有，基本原则还是要的。话说回来，也没必要从全新的想法里面寻找灵感，因为那样很容易误入歧途。
• 保证品质和水准
  基本上我觉得如果你的新想法足够好，判断品质究竟如何对你来说应该很容易。

对于高品质设计你有什么看法？

让一项设计因高品质脱颖而出，实在涉及到太多方面。我只能说我列出了一些基本要点。所以我希望能听听您对这一问题有何高见？在判断一件网页设计作品是否显示出高品质时，你最关注的是什么呢？

关于作者与译者

原文出自WeFunction，作者是 liam，初发表于2009年4月13日。
译文由笨活儿翻译。原始网址：http://blog.benhuoer.com/2009/05/quality-within-web-design/

本文分上下两篇，上篇主要总体介绍jQuery 1.4版本的相关使用及更新，下篇通过一些代码示例来展示更新的方法及新添加的方法。

【下载及调用】

像以往一样，官方提供了jQuery的两份拷贝，一份是压缩版本（使用Google Closure Compiler压缩，之前使用的是YUI），另一份是未压缩版本（用来调试和阅读）。

• jQuery压缩版本（23kb，gzip压缩后）
• jQuery未压缩版本（154kb）

本博之前曾提议过通过google服务器加载jQuery，提高加载速度。现在，我们依然可以通过Google的服务器调用压缩后的jQuery 1.4版本文件，如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"><!--mce:0--></script>

【新特性及变化】

在jQuery 1.4中，许多常用的jQuery方法被重写，这些改进不仅更易用，也带来了性能的显著提升。

注：以下为概述，不详之处参见下篇的代码解释。

1. 为一些方法添加设置函数（Setter Functions）

   在之前版本中，我们可以给attr()方法传入一个函数，将函数的返回值赋予某个属性。1.4中，这个功能被添加到了更多的方法中：.css()、 .attr()、 .val()、 .html()、 .text()、 .append()、.prepend()、 .before()、 .after()、.replaceWith(), .wrap()、 .wrapInner()、 .offset()、 .addClass()、 .removeClass()、 .toggleClass()。

   此外，在下面方法中，还可以传入当前值作为设置函数的第二个参数，供设置函数使用：.css()、.attr()、.val()、.html()、.text()、.append()、.prepend()、.offset()、.addClass()、.removeClass()、和 .toggleClass()。例如：

   jQuery('<img src="enter.png" alt="enter your name" />')
   .attr("alt", function(index, value) {
       return "Please, " + value;
   });

2. 更新了jQuery中序列化的核心方法jQuery.param()

   之前对于{foo: ["bar", "baz"]}序列化后的结果是“foo=bar&foo=baz”，现在为“foo[]=bar&foo[]=baz”。
   这样更改的目的主要是告诉接收端，传入的是一个数组对象。

3. 在jQuery.ajax

   中可在不指定dataType属性时，会根据response的content-type自动识别。
   例如：ajax请求返回的对象是json类型（application/json），则dataType会自动指定为”json”（不指定的情况下）。

4. 在jQuery.ajax请求中，添加对Etag的支持。

   之前jQuery在ajax请求中是在header中不发送If-None-Match值的（也就是不支持Etag），也就默认忽略了浏览器缓存。现在可以通过指定ifModified属性开启它。

   提示：如果您不了解http header的相关知识，推荐阅读这篇文章。

5. 使用原生的JSON.parse，对json进行严格解析

   在1.3及更早版本中，jQuery通过javascript的eval方法来解析json对象。在1.4中，如果你用的浏览器支持，则会使用原生的JSON.parse进行json对象解析，这样对json对象的书写验证则更为严格。如：{foo: “bar”}的写法将不会被验证为合法的json对象，必须写成{”foo”: “bar”}。如果你的程序打算升级到1.4版本，那么这一点要尤其注意了。

6. 在使用.serialize() 序列化时，添加对HTML5元素的支持
7. 为ajax请求添加上下文支持，参考jQuery.ajax()

   jQuery.ajax({
       url: "test.html",
       context: document.body,
       success: function(){
           jQuery(this).addClass("done");
       }
   });

8. 在jQuery.ajax()请求时，接收XMLHttpRequest对象作为success的第三个参数
9. 在ajax请求时，总是设定Content-Type属性

   在1.3版本中，如果ajax发送的数据为空时，则不发送Content-Type属性值，1.4中则总是显式设定Content-Type值。这是因为有些程序后端通过Content-Type值判断如何响应。

10. 当用jsonp方式进行ajax请求时，可以显式指定callback的名称

    之前jsonp的callback名称是由jQuery生成的随机名称，现在可以通过jsonpCallback参数显式指定

11. 部分CSS相关方法被重写。其中，.css()方法效率有两倍的提升， .addClass()、.removeClass()和.hasClass()效率有三倍的提升。.toggleClass() 方法可以一次切换多个class

    $("div").toggleClass("current active");

12. 在jQuery 1.4中，许多dom操作相关方法在性能上大幅提升

    其中.append()、 .prepend()、.before()、和 .after() 的性能被改善，
    .html() 的性能提升了近3倍。
    .remove() 和 .empty()的性能提升了近4倍。

13. jQuery(”tag”)效率有所提升

    当传入一个tag名称进行寻找时，搜索算法有所改进 。

14. 使用id开始的选择器获取元素的速度进一步提升

    类似于jQuery(’#id p’)这样以id开始的选择器获取元素的速度有所优化，速度是最快的。

15. jQuery()（或$()）将返回jQuery空对象

    在之前当调用jQuery()时，默认返回的是document的jQuery对象，也就是等价于jQuery(’document’)。在1.4版本中将不再做这样的转换，直接返回jQuery空对象。

    在1.4中，之前jQuery().ready()的写法不建议使用（虽然仍然可以用），应当写作jQuery(document).ready()或jQuery(function(){})

16. 添加了新事件.focusin()和.focusout()

    .focusin()和.focusout()方法等价于focus()和blur()方法，不同的是支持事件冒泡。需要注意的是focus()和blur()事件依然不可以通过live()方法绑定。

17. 几乎所有事件都支持live()绑定

    除了ready、focus（用focusin替代）、blur（用focusout替代）事件外的所有事件都支持live绑定

18. jQuery 1.4对内部结构重新组织，并开始建立代码风格规范

    之前的core.js被划分为attribute.js, css.js, data.js, manipulation.js, traversing.js和queue.js。ready事件被移至core.js中。

    jQuery 1.4开始建立了代码风格规范，大多数核心代码符合这一规范。虽然这个规范仅有几条，但我相信这是一个良好的开端。

【相关测试】

在jQuery 1.4中解决了207个bug（相比之下，1.3解决了97个bug）。

此外，测试用例从1.3.2的1504个增加了1.4版本的3060个。这些测试100%通过当下主流浏览器（Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7, IE 8, Opera 10.10, 和 Chrome）。

【版本兼容性处理】

从上面还是可以看出1.4是做了相当多的更新，为了保证当前版本的向后兼容（也就是希望你之前使用jQuery 1.3版本的程序平稳过渡到1.4版本上），官方特意提供了兼容性脚本补丁，如下使用：

     <script src="http://code.jquery.com/jquery.js"></script>
     <script src="http://code.jquery.com/jquery.compat-1.3.js"></script>

注：以上内容以jQuery官方文档为依据撰写而成，更加详细内容可直接访问官方说明页面。

本文地址：jQuery 1.4正式发布：一起来看有哪些新变化（上篇）（转载请以链接形式注明来源）

下载Office 2010版本的时候有个小技巧。如果您想下载32位(x86)版本，那就点击“开发人员下载”进入；

如果想下载64位版本，就点击“IT专业人员下载”进入。

微软已经提供Office 2010官方下载，而且提供免费的MAK密钥。其实一共只提供了4个密钥而已，这里icech公布出来，大家就可以直接使用并且激活Office 2010了。

Office 2010 Beta2中文版密钥：

2PWHY-KT4X6-96PYW-XQR7V-HW2W9

7XD2X-JWJ94-BCHBW-W9WXP-J2WPT

YF79C-7Y4B4-PGM89-6BKGJ-46PBT

PYMDW-8DFY2-Y68BB-XHDGD-CT443

激活方法：

我们建议您完成安装后尽快激活 Office Professional Plus 2010 Beta。

安装 Microsoft Office Professional Plus 2010 Beta 后，请按照以下步骤进行操作

步骤 1： 打开 Microsoft Word 2010 Beta，然后单击“文件”选项卡。将显示后台验证视图。接着，单击左边选项卡集合中的“帮助”。

步骤 2： 单击屏幕右侧的“更改产品密钥”。

步骤 3： 输入上面显示的多次激活密钥 (MAK)。请选中自动激活框，或者重新启动应用程序，使用激活对话框进行激活。

步骤 4： 这就是您需要完成的全部操作。在 Microsoft Word 2010 Beta 中输入 MAK 密钥以自动激活所有 Office Professional Plus 2010 Beta 应用程序。单击“文件”选项卡可返回“文档”视图。

使用了 Microsoft Office Professional Plus 2010 之后，无论您的员工是使用 PC、智能手机，还是 Web 浏览器工作，该产品都能为他们提供大量强大的新功能来帮助他们更好地完成工作。Office Professional Plus 2010 对 Excel、PowerPoint、Word、Outlook 以及可让每个人都能更轻松地跟踪、报告和共享重要信息的新服务器集成功能进行了重大更新，通过用户熟悉的、直观的工具提供了所有程序包。

其中包含的应用程序：Word、OneNote、InfoPath、PowerPoint、Access、SharePoint Workspace、Outlook

Publisher、Communicator

Office 2010官方下载和获取密钥的地址：

http://www.microsoft.com/office/2010/download-office-professional-plus/default.aspx

如果不想官方下载，请到微软Office2010 14.0.4536.1000 简体中文版x86/x64位下载

Office 2010 Beta 简体中文版高速下载 官方提供免费密钥

不久前，微软中国开始了免费赠送Office 2010 Beta光盘的活动，吸引了不少用户的参与。日前微软官方又在Office商店公开了Office Pro 2010 Beta的下载，大家可以通过在登录自己的Live ID之后，直接获取下载地址和KEY，并可免费使用到2010年10月，这相较之前Office 2010 Beta 2烦琐的下载过程确实方便了很多。

Office专业版2010 Beta中文版，包括Word、Excel、PowerPoint、OneNote、Access、Outlook、Publisher组件，组合了在任何地方创建、编辑和共享文档所需的一切。

官方特供版Office Professional 2010 Beta获取地址：

http://www.officebeta2010.com/referrer.aspx?r=f4c00acb-c1cb-45d2-a665-711ba1e4faa4

PS：一定要登陆LIVE，没有的注册一下即可，只需30秒。

  网络是一个非常好的环境，也是一个有丰富的知识来分享的协作社区。我们想要有圆角，我们就实现了它；我们想要多背景图片，我们实现了它；我们想要 边框图片，我们也让它实现了。所以需求从来不是问题，否则，我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道，网络无所不能。

为网络而生

  CSS 3的属性比如border-radius、box-shadow和 text-shadow在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验，而且它们可以优雅的降级。然而，这些只是CSS 3能为我们做的众多事情中的一小部分。

  在本文中，我们将走的更远，看一看 变形(transformation)、转换(transition)和动画(animation)等更高级的CSS3技术。我们将涉及代码本身、浏览器支持以及一些可以正确地展示这些新属性是如何即提升你的设计又增强整体用户体验的例子。

CSS 变形(Transformation)

  CSS transformation是W3C的一个草案。但当我第一次坐下来阅读它的全部特性以了解一些东西的时候，它并没有让我感到开窍。你可以想象的到，这个文档是用技术术语的撰写的，而且它更关注变形的图形(比如绘图)元素和矩阵。大一学习微积分之后就没有碰过矩阵了，我必须为本章节做很多好的旧浏览器测试以及猜测和检验。

  在看完我能找到的每一个教程和大量的浏览器测试之后，我总结出一些大家都能从中获益的有用的关于CSS变形的信息。

transform

  transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。

  一些前卫设计的最大诟病就是文字不可选(必须要使用切图的方法实现)。当你熟练使用transform属性来控制文字的时候，这就不再是问题了，因为这是个纯CSS方法，所以元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优势。

一些有趣而有用的变形功能：

• rotate
  Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
• scale
  Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
• translate
  Translate就是基于X和Y 坐标重新定位元素
• skew
  顾名思义，skew就是要将对象倾斜，参数是度数
• matrix
  transform支持矩阵变换，就是基于X和Y 坐标重新定位元素

让我们更深入的了解每一个功能吧。

Rotate

  transform属性有很多用法，其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素，它可以实现很酷的效果。

1
2
3
4
5
6

#nav{
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}

  请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。

浏览器支持

  浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中，我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。

  相当简单吧？唯一的问题是对于一个相当重要的设计元素，如果IE不支持，很多设计师就会不情愿使用它。

  幸运的是，IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制，但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值，显得有些鸡肋，但是对于IE来说，聊胜于无吧。

  另外，非常值得一提的是，Opera在前几天发布了Opera 10.50 pre版本，声称支持CSS3 的transition和transform。只是还是需要使用私有属性，也就是要使用前缀 -o-

scale

  scale并不像你想象的那样工作：简单的缩小和放大一个元素。缩放功能同时采用宽和高两个值，这些值可以是正数、负数和小数。

  正数值放大一个元素，正如你期望的那样，基于指定的宽度和高度。

  负数值并不会缩小元素，而是翻转它(比如，文字被反转)然后相应的缩放它。然而，你可以使用小于1的小数(例如.5)来收缩或者缩小一个元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#nav {
	/* nav元素的宽和高都会被放大双倍 */
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-o-transform: scale(2); }
#nav {
	/* nav元素的宽会是双倍，而高度保持不变 */ 
	-webkit-transform: scale(2, 1); 
	-moz-transform: scale(2, 1);
	-o-transform: scale(2, 1);
	}
#nav {
	/* nav的宽度将是双倍，并且水平翻转，但是高度保持不变 */ 
	-webkit-transform: scale(-2, 1); 
	-moz-transform: scale(-2, 1); 
	-o-transform: scale(-2, 1); 
	}

浏览器支持

  scale属性目前只有Firefox, Safari/Chrome以及 opera 10.50支持，到目前为止没有一个IE版本支持。缩放一个对象是相当有意义的设计选择。它可以通过渐进增强来使用:hover，这可以在你的导航上添加一个小小的趣味。

1
2
3
4
5
6

#nav li a:hover{
	/* 这可以让你的导航链接在鼠标经过的时候轻微的放大 */ 
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1); 
	-o-transform: scale(1.1); 
	}

translate

  这个名称“translate(转化)”有点容易误解。它事实上是一种使用X和Y坐标值定位元素的方法。

1
2
3
4
5
6

#nav{
	/* 这会将nav元素向左移动10像素并向下移动20像素 */
	-moz-transform: translate(10px, 20px);
	-webkit-transform: translate(10px, 20px); 
	-o-transform: translate(10px, 20px); 
}

浏览器支持

  translate属性目前只被Firefox, Safari/Chrome和Oprea 10.5支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Skew

  Skew也是一个很有用的transform功能，它可以将一个对象围绕着x和y轴按照一定的角度倾斜。这和rotate的旋转不一样，rotate只是旋转，而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数，分别代表x和y轴的倾斜度数。

1
2
3
4
5
6

#nav{
	/* 这会将nav元素向左移动10像素并向下移动20像素 */
	-moz-transform: skew(30deg, -10deg);
	-webkit-transform: skew(30deg, -10deg); 
	-o-transform: skew(30deg, -10deg); 
}

浏览器支持

  Skew属性目前只被Firefox, Safari/Chrome和Oprea 10.5支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Matrix

  没错，Matrix就是矩阵，矩阵是高等数学中非常基础的一个东东，而在CSS 3中确实一个相当高级的功能，CSS 3引入matrix函数，可以非常灵活的实现上述的各种效果。它有6个参数(a,b,c,d,e,f)，它事实上是一个3*3矩阵，经过该矩阵将旧的参数转换成新值：
| a b e |
| c d f |
| 0 0 1 |
如果你有兴趣深入研究，可以看一下这里http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，这是SVG的一个文档，但是对于matrix变换的原理是通用的。

让我们来看一个例子吧：

1
2
3
4
5
6

#nav{
	/* nav元素将会像右上角倾斜 */
	-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
	-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); 
	-o-transform: matrix(1, -0.2, 0, 1, 0, 0); 
}

浏览器支持

  可喜的是，IE支持matrix滤镜，虽然它不支持大部分CSS3变形功能，但是使用它的这个滤镜，基本也可以实现相同的效果，不过，你要先搞明白矩阵运算再说。webkit和Firefox(3.5+)、Opera 10.5都支持该功能。

链式变形

  变形常常是单独的，但是如果你想同时用到多种变形，代码也是可以快速整合的，特别是使用私有扩展。幸运的是，我们有一些内置的缩写：

1
2
3
4
5
6
7
8
9
10
11

#nav{
	-moz-transform: translate(10, 25); 
	-webkit-transform: translate(10, 25); 
	-o-transform: translate(10, 25); 
	-moz-transform: rotate(90deg); 
	-webkit-transform: rotate(90deg); 
	-o-transform: rotate(90deg); 
	-moz-transform: scale(2, 1); 
	-webkit-transform: scale(2, 1); 
	-o-transform: scale(2, 1); 
}

这些变形可以被链到一起，从而让你的代码更高效:

1
2
3
4
5

#nav{
	-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
	-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); 
	-o-transform: translate(10, 25) rotate(90deg) scale(2, 1); 
	}

  这些属性的真正的威力是合并到一起。你可以移动、旋转、缩放并控制任何内联元素和块级元素而不使用JavaScript。一旦这些属性的支持变的更加广泛，我们就可以创建更丰富和更轻量的界面和应用。

transform-origin

  transform-origin不是transform的一个子功能，但是和transform关系非常密切。它可以用来指定transform的起点，比如，rotate变形的默认起点是其中间，你可以将起点设置在左上角，或者左下角，这样rotate变形的结果就可能大不相同了。

  transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,middle,bottom等描述性参数。几个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13

.class1{-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
...}
.class3{-moz-transform-origin:top left;
-webkit-transform-origin:top left;
-o-transform-origin:top left;
...}

浏览器兼容性

  该属性目前也只有webkit、firefox和Opera 10.5支持，而且需要添加各自的私有前缀。

transition(转换)

  一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。

  转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。

1
2
3
4
5
6
7
8
9
10

#nav a{ background-color:red; }
	#nav a:hover, #nav a:focus{
		background-color:blue;
		/* 告诉转换去应用到background-color 属性(看起来像一个CSS 参数，不是吗？ #foreshadowing)*/
		-webkit-transition-property:background-color;
		-o-transition-property:background-color;
		/* 让它持续两秒钟*/
		-webkit-transition-duration:2s;
		-o-transition-duration:2s;
}

转换的一些参数

• transition-property

  指定转换的CSS属性名称，比如，上面的例子中，将转换应用于background-color属性。

• transition-duration

  定义转换花费的时间（从旧属性换到新属性花费的时间）

• transition-timing-function

  可以理解为过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out

• transition-delay

  这个比较容易理解，就是转换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动作会从该时间点开始显示，之前的动作被截断。

注：参数部分为前端观察翻译时添加，原文中没有。

浏览器支持

  像transform属性一样酷，但是目前只有WebKit浏览器支持。Opera 10.5 pre版本也可以通过添加-o-前缀来支持。-moz-transition已经在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以实现将来的增强。甚至可以添加一个不用私有前缀的属性，以防万一。

Animation

  动画是CSS 3最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性比如animation-duration、animation-name 和animation-timing-function整合以创建像Flash动画一样的效果——纯CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#rotate {
	margin: 0 auto;
	width: 600px;
	height: 400px; 
	/* 确保我们是在一个 3-D 空间 */
	-webkit-transform-style: preserve-3d;
	/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
	-webkit-animation-name: x-spin;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear; 
}
	/* 定义要调用的动画 */
@-webkit-keyframes x-spin { 
	0% { -webkit-transform: rotateX(0deg); } 
	50% { -webkit-transform: rotateX(180deg); }
	100% { -webkit-transform: rotateX(360deg); } 
}

  这个梦幻的CSS动画代码和在线演示可以在webkit网站看到。该演示可以在任何网站看到，但是动画效果却只能在Mac os(雪豹)的WebKit的nightly build版本可见。它看起来就像上面的视频中的一样，如果你是在用mac os (雪豹版本)，我认为安装一个webkit以亲眼看看这个效果是很值得的(它真的很酷)。Windows系统用户暂时无法欣赏这个效果。

animation的一些参数

animation的参数和translate有些像，所以如果你理解了translate的参数，这里就不难理解了。

• animation-name

  动画的名称。

• animation-duration

  定义动画播放一次需要的时间。默认为0；

• animation-timing-function

  定义动画播放的方式，参数设置类似transition-timing-function

• animation-delay

  定义动画开始的时间

• animation-iteration-count

  定义循环的次数，infinite即为无限次。默认是1。

• -webkit-animation-direction

  动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

浏览器支持

  不幸的是，目前，只有少数浏览器支持CSS动画。2D CSS animations 可以在Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira 以及其它Webkit 浏览器中工作。Safari 4 (Snow Leopard)支持3D动画

总结

  现在，JavaScript可以在CSS 3完善之前弥补这个差距。遗憾的是，让所有浏览器支持这些很棒的属性可能需要一个很长的过程。不用等待那一天的到来，我们可以先使用一些严谨的渐进增强以及以来Javascript来增强我们的网站和应用。这不是件坏事，至少现在看起来是。

  看了最近的IE9的公告，如果IE团队添加这些属性中的一些到这个新的版本的浏览器中我不会感到惊讶，他们已经开始考虑整合CSS3了(border-radius)。

  web的前景是光明的，特别是因为这些类似动画的高度实验性的属性。尽管很多属性对客户或高级产品工作还不可用，至少他们很有趣！我们都期待着有一天，我们可以支持所有平台，以建立一些真的很棒的轻量级应用。

参考与资源

• A Crash Course in Advanced CSS3 Effects
  Net Tuts 发布的一个很酷的关于CSS3效果的视频。
• Webkit Announces Support for CSS 3D Transforms
  CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit.
• Jonathan Snook on CSS Text Rotation
  Jonathan Snook 讲述即将到来的CSS3 属性.
• DEV Camp CSS3 Tricks
  一份来自Dan Kurtz的幻灯演示
• W3C Spec on 2-D Transformations
  关于2-D 变换的资源.
• W3C Spec on 3-D Transformations
  一个关于3-D 变换的资源.
• W3C Spec on CSS3 Animations
  CSS animations的W3C工作草案
• Safari CSS参考
• MDC:Using CSS transforms
• MDC: -moz-transform

关于原作者

  Tim Wright是一位网页设计师/开发工程师和博主。他从2004年就成为一名web标准和易用性的倡导者。你可以在CSSKarma.com上找到他写的更多文章，或者follow Tim on Twitter。

文章来源：
译自：你需要知道的CSS3 动画技术
译自：What You Need To Know About Behavioral CSS

1. 垃圾回收站功能

后台的文章，页面和留言编辑面板里，增加了一个”Trash“选项。被Trash后的数据将进入回收站列表，然后可以选择恢复(Restore)或永久删除(Delete Permanently)。

这个功能是为了防止博客主误删文章或留言。但个人觉得有些鸡肋，“怕误删文章或留言的人”和“讨厌删个文章还要删两次的人”，哪种会多一点？

2. 内置的图片编辑器

WordPress 2.9内置了一个图片编辑器，挺强大的。支持对图片的裁剪、顺/逆时针旋转和水平/垂直镜像图片翻转，并且，你可以选择对图片的编辑最终生效于该图片的所有尺寸、缩略图还是除缩略图以外的其它尺寸。

3. 批量插件更新功能

在”工具->更新“里面，多了一个批量插件更新功能，你可以一次更新多个插件至最新版本。

4. 更简易的视频嵌入功能

这一功能主要方便用户嵌入在线视频或图片网站中的视频和图片。你只需要在文章编辑器中输入视频页面的URL地址，生成的前台文章即会显示该视频。相当于你以前从某个视频网站转视频，需要复制该视频的转贴代码，而现在，只需要输入该视频的访问网址即可。

但这一功能还是有很多局限性，尤其对国内用户来说:

首先，它只支持一些国外比较热门的视频和图片网站，比如Youtube, Flickr, Vimeo等等。而该份列表里，有一半是国人无法正常访问的。

然后，使用这个功能时需要注意: 视频的URL地址应该写在单独的一行里，否则不会生效。不会你也可以使用短代码<embed>视频地址</embed>的形式来插入，这样不管代码是否写在单行，都会生效。

WordPress 2.9的这一功能主要是由oEmbed提供支持。如果你对该功能感兴趣，可以查看WordPress官方更详细的介绍。

开发人员会感兴趣的功能列表

WordPress 2.9的这次更新多达500处，下面再罗列一些WordPress插件或主题开发人员比较感兴趣的功能:

• 添加了一个rel=canonical属性到<head>部份，增强SEO效果
• 自动数据库优化功能支持, 如果你想开启这一功能，可以到 wp-config.php 文件里添加代码: define(’WP_ALLOW_REPAIR’, true);
• 可以通过category-slug.php来指定分类模板，以前是只可以用category-id.php的形式。
• 增加了一个新的数据表格commentmeta, 这就类似之前的postmeta, 也就意味着，你可以给留言也增加自定义字段和相应的值了，整个留言框架的扩展性提高了，且有关留言部份的主题开发和插件制作都将更容易实现。
• 使用更好的API支持，post types可以不仅局限于post, page和attachment, 可以有更多类型。但具体我也没试用过，官方说会在3.0的时候添加更多更好的支持。
• 主题设计者可以通过注册”post thumbnail”来实现给每篇文章添加一个文章缩略图配置选项。这也是为了适应越来越多的Magazine布局主题。这一更新对于主题开发者来说很有用，想了解实现详细的朋友可以看一下Justin Tedlock的这篇文章，Everything you need to know about WordPress 2.9’s post image feature，详细的介绍了该功能的使用方法。
• 图片Gallery调用里，多了一个include和exclude属性，这意味着你可以调用其它文章中的图片附件，或排除当前文本中不想插入的图片附件。
• 注册和个人空间现在有能力更方便的添加更多字段，比如添加个Twitter帐户字段来收集用户的Twitter空间地址。具体实现方法未仔细研究，插件作者请自寻之。
• 自定义分类系统(Custom taxonomie)已经正确支持WXR的导入和导出。
• 主题和插件编辑器在你编辑保存之后，会回到你之前编辑的那一代码行。
• 更快的快捷书签功能。

总的来说，除了垃圾站回收那个功能我不敢恭维之外，WordPress 2.9的新增和改进都不比较不错。尤其是开发方面，给予开发人员更多简便。

来源于 WordPress 2.9正式版新功能详解 | 帕兰映像

    工作要有激情，这没错，但是平时想过舒舒服服的在家里宅个周末吗？大部分人都是懒骨头，站着不如坐着，坐着不如靠着，靠着不如躺着。。。不过大部分人用电脑的时候都是一个固定的姿势吧，这样不光不够舒服，对身体还是有很大的害处的。

    看看这个设计的笔记本托架，让你在任意的姿势下舒舒服服的使用电脑。

DreamTechy有意思的关于笔记本的设计：

• 苹果文件夹电脑Apple Mac Folder

• 卷筒便携概念笔记本

• Always Innovating 创意触摸式显示器键盘笔记本 Touch Book

• 设计成这样的苹果 Mac Book Mini，你会买吗？

• 真正可以塞在口袋里面的电脑UMID M1 mbook

• 索尼Sony推出全球最轻8英寸笔记本

• 惠普HP Flyfire的双屏笔记本

• RIM注册蝴蝶机外型新专利

文章摘自：我烧网

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById(”msg”))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$(”#msg”)[0]，$(”div”).eq(1)[0]，$(”div”).get()[1]，$(”td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$(”#msg”).html();
$(”#msg”)[0].innerHTML;
$(”#msg”).eq(0)[0].innerHTML;
$(”#msg”).get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：
$(”div”).eq(2).html();    //调用jquery对象的方法
$(”div”).get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$(”#msg”).html();    //返回id为msg的元素节点的html内容。
$(”#msg”).html(”<b>new content</b>”);
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$(”#msg”).text();    //返回id为msg的元素节点的文本内容。
$(”#msg”).text(”<b>new content</b>”);
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

$(”#msg”).height();    //返回id为msg的元素的高度
$(”#msg”).height(”300″); //将id为msg的元素的高度设为300
$(”#msg”).width();    //返回id为msg的元素的宽度
$(”#msg”).width(”300″); //将id为msg的元素的宽度设为300

$(”input”).val(”); //返回表单输入框的value值
$(”input”).val(”test”); //将表单输入框的value值设为test

$(”#msg”).click(); //触发id为msg的元素的单击事件
$(”#msg”).click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$(”p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$(”tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$(”p”).click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$(”p”).click(function(){alert($(this).html())})
.mouseover(function(){alert(’mouse over event’)})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8、操作元素的样式
主要包括以下几种方式：
$(”#msg”).css(”background”);    //返回元素的背景颜色
$(”#msg”).css(”background”,”#ccc”) //设定元素背景为灰色
$(”#msg”).height(300); $(”#msg”).width(”200″); //设定宽高
$(”#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式
$(”#msg”).addClass(”select”); //为元素增加名称为select的class
$(”#msg”).removeClass(”select”); //删除元素名称为select的class
$(”#msg”).toggleClass(”select”); //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$(”#msg”).click(function(){alert(”good”)}) //为元素添加了单击事件
$(”p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$(”tr”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert(”Load Success”)})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$(”p”).toggle(function(){
$(this).addClass(”selected”);
},function(){
$(this).removeClass(”selected”);
});
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$(”p”).trigger(”click”);    //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$(”p”).bind(”click”, function(){alert($(this).text());}); //为每个p元素添加单击事件
$(”p”).unbind(); //删除所有p元素上的所有事件
$(”p”).unbind(”click”) //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert(”Item #”+i+”: “+tempArr[ i ]);
}
也可以处理json数据，如
$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(”   hello, how are you? “); //返回”hello,how are you? ”

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(”#msg”)改为jQuery(”#msg”)。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery(”div p”).hide();
// 使用其他库的 $()
$(”content”).style.display = ‘none’;

注意：本文是基于Mac版本的Photoshop而写的。如果你使用的是PC版本，那么文中的Cmd键相当于Ctrl键，Opt键相当于Alt键。

拖动选区

使用选框工具，在文档上拖动（此时请不要松开鼠标），现在按住空格键，这可以让你拖动这个选区。

向左侧或右侧浏览文档

按住Cmd键并且上下滑动鼠标滚轮可以让你向左侧或是右侧浏览文档。Hold 举个例子，按住Cmd键再向上滑动鼠标滚轮可以向右侧浏览文档。

浏览字体列表

将光标定位在字体列表的下拉菜单中，按向上键或是向下键您可以浏览字体列表。

缩放字体尺寸

选取你要缩放尺寸的文字，按组合键Cmd+Shift+》或《来放大或缩小字体的尺寸。

用鼠标滚轮来进行视图缩放

你可以使用组合键Cmd+Opt+鼠标滚轮上下滑动来进行视图的放大和缩小。

鼠标拖动来调整数值

鼠标滑过数值输入框，按住Cmd，再向左或向右拖动鼠标可以增大或减小这个数值。按住Cmd+Opt或是Shift键，然后拖动可以一次改变10个单位的数值。这个快捷方式适用于所有的数值输入框。

用鼠标滚轮来调整数值

将光标定位于数值输入框内，滑动鼠标滚轮可以改变该数值。这个快捷方式适用于所有的数值输入框。

使用向上或向下键来调整数值

将光标定位于数值输入框内，按向上或向下的方向键来调整该数值。按住Shift键的同时按向上或向下键可以一次改变10个单位的数值。

缩放到实际大小

双击缩放工具可以将文档缩放到实际大小（100%大小）。

折叠或展开所有层组

按下Cmd的同时点击群组文件夹前的三角形符号可以折叠或展开当前级层组。按下Cmd和Opt键的同时击这个三角形符号，可以折叠或展开所有层级的群组文件夹。

整排显示或隐藏

如果你需要显著显示或隐藏多层，除了一个接一个点击之外，你可以点击层前的可视标志（眼睛图标）并整排拖动。

隐藏其他层

按下Opt键的同时点击可视图标可以隐藏其他所有层。

浏览图层的混合模式

使用组合键Opt+Shift+加号键或减号键可以让你浏览到混合模式的各个下拉菜单。

设置特定的混合模式

按下组合键Opt+Shift+C、N、M、S、D等字母键可以设置特定的混合模式。

举例如下：

正常（Normal） = Opt + Shift + N

滤色（Screen） = Opt + Shift + S

正片叠底（Multiply） = Opt + Shift + M

颜色（Color） = Opt + Shift + C

锁定层的透明度

按下斜杠键（“/”）可以锁定层的透明度。

载入通道选区

或许你会知道使用组合键Cmd+数字键（1、2、3）可以激活相应的通道。按下组合键Cmd+Opt+数字键可以载入相应通道的选区。举例来说，按下Cmd+Opt+数字4可以载入Alpha通道1的选区。

工具面板

按下Tab键可以切换工具面板。

精确的光标

按下大写字母锁定键（Caps lock）可以将显示的工具的光标改变为精确模式。

浏览工具列表

你可以通过按下Shift+工具的快捷键来浏览相应工具的列表。举例：B=画笔工具，如果你再按下Shift+字母B，你可以切换到铅笔工具。

增大或减小画笔尺寸

在画笔工具被选择的情况下，你可以按下“［”或“］”（左右方括号键）来增大或减小画笔的尺寸。按下组合键Shift+“［”或“］”可以增大或减小画笔的硬度。

不透明度

你可以通过按下数字键来设置图层的不透明度（即，1=10%，2=20%，等等）。当你已经选择了画笔工具，按下数字键可以调整画笔的不透明度。

复制层

有以下几个快捷方式可以复制层。

1. 按下Cmd+Opt的同时拖动当前被激活的层。

2. 按下组合键Cmd+Opt+方向键（向上键、向下键、向左键、向右键均可）。

3. 按下组合键Cmd+J可以将当前层复制到新层的原位置。

4. 按下Opt键的同时在层调板拖动也可以复制层。

复制可见层并粘贴至新层

按下组合键Cmd+Opt+Shift+字母E，可以复制可见图层并粘贴至新层。

改变工作区的背景色

默认情况下，Photoshop的工作区背景颜色是灰色的。你可以通过以下步骤改变背景色：

1. 选择你喜欢的颜色

2. 选择油漆桶工具

3. 按住Shift键的同时点击文档区域之外的工作区

更新：

在工作区内右键单击打开下拉菜单，你可以设置背景色为黑色、灰色或自定义的颜色。（Todd Patrick补充）

添充背景色或前景色

Opt + Delete （Backspace） = 以前景色添充

Cmd + Delete （Backspace） = 以背景色添充

更新：

Cmd + Shift + Delete （Backspace） = 以背景色添充不透明像素部分

Opt + Shift + Delete （Backspace） = 以前景色添充不透明像素部分

（André Dion补充）

在文档窗口之前切换

使用Ctrl+Tab可以在多个文档窗口之间切换。

载入图层显而易见部分的选区

按下Cmd同时点击图层的缩略图，可以快速载入它显而易见部分的选区。

从中心按比例缩放

当你正在使用选框工具或自由变换，按住组合键Opt+Shift的同时再用鼠标拖动可以从中心按比例对对象进行按比例缩放。

吸管的快捷方式

如果你已经选择了笔刷工具，按住Opt键可以快速启动吸管工具。按住组合键Opt+Shift可以启动颜色取样工具。

最后……

最后，如果你要检查或设置你自己的自定义快捷键，按组合键Cmd+Opt+Shift+字母K可以调出键盘快捷键的面板。