Latest Publications

Flash、Flex、Flash Player和AIR之间的关系和联系

从Adobe的产品范畴来看,Flash和Flex是面向开发人员的工具,开发人员依赖这两个工具来开发Flash应用程序。而Flash Player与AIR则是Flash的运行环境(runtimes),其中Flash Player主要用于浏览器而AIR主要用于桌面程序。

(更多…)

onmouseover & onmouseout

问题描述

在很多情况下,我们需要这样的一种效果,当鼠标进入元素时做某些操作,而当鼠标离开元素时又做另外一些操作。很自然的我们会想到DOM事件中的onmouseover和onmouseout事件,其中onmouseover表示的是当鼠标从元素之外移入元素时触发的事件,而onmouseout则表示鼠标从元素移出时触发的事件。具体效果请看这个页面

从页面的效果中可以看出以下两个问题:

  1. 当鼠标从当前元素进入到其子元素时会触发当前元素的onmouseout事件,也就是说视其离开了当前元素。
  2. 当子元素中发生onmouseove和onmouseout事件时,由于冒泡机制会被父元素捕获。

(更多…)

把inline脚本写在合适的位置

今天读到Steve Souders的一篇关于如何放置内联脚本的文章-Positioning Inline Scripts,现总结在文本。

之前译的一篇文章《无阻塞加载脚本》谈到的是外部脚本对于页面性能的影响,例如阻塞资源下载、阻塞页面渲染等。而对于inline的脚本,同样存在类似的问题,有的甚至是有过之而无不及。

(更多…)

主流框架中DOMContentLoaded事件的实现

在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件、DOM操作某些结点等。原来比较常用的是window的onload事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如图片、脚本、样式表甚至是iframe中所有资源的下载后才触发的。这对于很多实际的应用而言有点太“迟”了,比较影响用户体验。为了解决这个问题,FF中便增加了一个DOMContentLoaded方法,与onload相比,该方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载。Webkit引擎从版本525(Webkit nightly 1/2008:525+)开始也引入了该事件,Opera中也包含该方法。到目前为止主流的IE仍然没有要添加的意思。虽然IE下没有,但总是有解决办法的,下文对比了一下几大主流框架对于该事件的兼容性版本实现方案,涉及的框架包括:

无阻塞加载脚本[译]+示例

      随着越来越多的站点向”Web2.0″应用发展,脚本的数量也在迅速增加。而与此同时脚本给页面性能带来的负面影响也是令人担忧的。在主流浏览器(例如IE6、IE7)中,由于脚本而产生的阻塞有以下两种:

  • 脚本会阻塞下载位于它之后的资源。
  • 脚本会阻塞渲染位于它之后的元素。

(更多…)

关于锚点

关于A标签的页内锚点,记录一下:
1. 目标元素的ID和Name都可以作为锚点,区别在于ID对于目标元素的类型是无限制的,而name则仅适用于以下元素:A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP.
(更多…)

纯CSS实现Tab的两种方案

Tab在当前的Web应用中是非常常见的,最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的Tab一般都是通过Javascript来实现,它的好处是灵活和功能强大。但是在某些情况下,如果仅仅需要一个简单的内容切换时是可以考虑使用纯CSS来实现的。本文主要介绍两种纯CSS的实现方案:

  • 1. 锚点 + :target;
  • 2. 纯锚点;

这两种各有各优点,也有各自的局限性。 (更多…)

增强的INS和DEL标签

按照W3C的说法,INS和DEL元素是用来标记文档变化的:INS用于标记新插入文档的内容;DEL元素用于标记已经从文档中删除的内容。此外,还可以给这两个元素设置cite和datetime属性。其中,cite为一个URI,语义上用来解释文档发生变化的原因;而datetime则表示文档发生变化的时间。在平常的使用中,很少有人会给这两个标签添加以上的属性(自动添加不算),本文主要介绍通过Javascript以及这两个属性来实现增强型的INS和DEL:当用户鼠标悬停在更改标记之上时,弹出浮动层显示内容变更的时间以及提供一个指向变更依据的链接。 (更多…)