Archives for December, 2009

最近在编写 CSS 的过程中, 发现 W3C 组织对 background-position 的验证有所调整, 虽然只是个小变动, 但可能影响很多人的编码习惯, 所以我决定提出来讲讲.

我们先来看看 W3C 对 background-position 的定义, 值的编写规则如下:

Read More...

博客首页的文章内容显示方式一直备受关注, 因为首页的内容直接影响到整个网站的被关注的程度, 无论是对爬虫还是对自然人. WordPress 这方面做得不是很到位 (或者说这根本不应该是 WP 内核提供的功能), 所以用户一直在讨论和寻求解决方式.

主流的解决方式

1. 显示全部文章内容.
2. 通过 WordPress 提供的 <!--more--> 标签折断文章内容, 显示前半部分.
3. 显示文章首段作为摘要. (所谓摘要, 就是没有链接, 图片等内容的纯文字内容.)
4. 显示文章限定字数作为摘要.
5. 不显示文章内容, 以列表形式显示文章标题等信息.
6. 不显示文章内容, 待页面文档加载成功再动态加载文章内容.

Read More...

已经写了好几个关于网页导航菜单的教程了, 我都是用原生 JavaScript 敲的代码, 一方面是为了读者更好地去理解其中的原理, 另一方面是让程序可以在不加载任何 framework 的情况下正常运行. 但是时间长了, 我发现越来越多人问我如何将这些效果集成到一些 JS 框架上, 尤其是 jQuery. 所以, 本节我们不探讨更多的效果, 而是将之前的一些菜单效果用 jQuery 来实现出来.

这次要用 jQuery 实现二级导航菜单, 淡出淡入导航菜单, 滚动导航菜单. 借助 jQuery 的强大动画, 我们需要的代码量非常少.

效果演示
二级导航菜单
淡出淡入导航菜单
滚动导航菜单

Read More...

jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown 和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.

如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过...

不知道本博客的老读者是否记得我写过的一个关于菜单导航的专题, 其中一节讨论的是滚动导航菜单的实现方法 (演示页面), 实现了类似 slideUp 和 slideDown 的效果, 但是不存在上述问题, 因为它的滚动高度是即时计算的, 而 jQuery 作为一个通用框架应用的面很广, 很难做到这一点.

Read More...

D2 是什么?

Designer & Developer Front End Technology Forum, 简称 D2, 是国内前端开发人员和网站设计师, 及对前端技术感兴趣者的一个技术交流平台, 旨在推动国内前端技术的发展, 发掘前端价值和创造力. D2 由淘宝网发起, 每届由不同公司作为组织方轮流承办.

第四届 D2 的主题是 "蜕变, 成长", 将于 12 月在杭州阿里巴巴园区举办.

Read More...

在平时工作中, 我们环绕需求设计页面结构, 样式和效果, 做成 DEMO, 再交付开发工程师套用并做成动态页面. 但是在交付工程师时, 我发现自己的思维方式和别的前端有点不一样. 我有时会在自身角度去思考, 误认为对方也熟知某些技巧, 其实不然.

上星期, 我在找 "奇迹 MU" 游戏中出宝石的声音文件, 想用这个作为铃声. 我找遍了整个网络, 人们都告诉我, 可以在游戏的安装文件夹内找到某某文件, 将这个文件转格式就可以用了. 我很纠结, 好像除此之外再没有可以得到这个文件的办法了, 但我又不愿意为了不到 1KB 的一个文件去安装 G 量级的软件. (最后, 我在某国外网站找到了这个文件.)

对工程师来说, 他们或许对这个并不熟悉, 如果你告诉他需要学很多与其核心工作不相关的东西, 他们同样会很纠结. 所以作为前端, 应该尽量将前台的处理进行封装. 可能我说得不是很明白, 下面用 Rating Stars 举例说明一下.

Read More...