表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug:

不看不知道，一看真蹊跷。selection-highlight 是选区，选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性：Ctrl + C 可以复制图片中的文字！

google 太强悍了，好在前端代码都是开源的，下面简单分析下。

首先数据在哪呢，这个比较容易找到，在 firebug 里有一个请求返回的数据如下：

<?xml version="1.0" encoding="UTF-8"?>

<pdf2xml>
<meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/>
<meta name="Producer" content="Adobe Acrobat 8.1"/>
<meta name="CreationDate" content="20100316080708-04'00'"/>
<page t="0" l="0" w="612" h="773">
 <text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7">
Please post comments or corrections to the Author Online forum at</text>
...

有了这份数据，就可以根据选区得到对应的文本。

接下来的问题是，如何将文本放到剪贴板里？第一反应是用 flash 实现，但感觉 google 不会这么做。禁用掉 flash 插件后，功能正常，这说明是用 js 实现的。

通过 Profile 工具 + Fiddler + 肉眼识别 + 运气，终于定位到了关键代码：

n.am = function(a) {
    if (! (!this.k.Ca && Mr(this, a))) {
        ac && this.lf.focus();
        this.lf.select();
        Nr(this, a)
    }
};

只要注释掉上面的代码，Ctrl + C 复制功能就无效。focus 和 select 为我们提供了进一步线索，在 HTML 里，发现了秘密：

到此真相大白：当用户按下 Ctrl + C 时，js 会注入事件，首先根据坐标从数据里取出对应文本，然后将文本赋值给 textarea, 并将其激活和选中。这样，就和用户选中 textarea 的内容，再按下 Ctrl + C 的效果是一样了。

强悍的 google, 技术创新无处不在！

注意：利用 textarea 只能复制纯文本，如果想复制富文本，可以借鉴 google docs 编辑 Word 文档时的处理方式：采用 iframe 充当临时容器，有兴趣的可以进一步研究。

简单演示：goog-docs-copy-demo.html

发现这个秘密后，最近在疯狂搞编辑的牛人承玉（欢迎搞编辑器的其他牛人加盟）立刻想到了各大站长们非常喜爱的功能：附带警告信息的禁止copy. 据说，能成功复制的，都不是“人”。

我的尝试是：点击按钮，复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去，但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制，对于触发的异步 Ctrl + C, 浏览器会限制其功能。

Google 的产品里有很多秘密，真诱人，创意无限！

您可能还关注的？

• 判断 iframe 是否加载完成的完美方法
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• [原创]用JS控制显示子菜单个数 自动下拉
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);

几点补充说明：

1. IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
2. 第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• [原创]用JS控制显示子菜单个数 自动下拉
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined

使用方法如下：

var fade = function(element, transparency, speed, callback){……}
透明度渐变：transparency:透明度 0(全透)-100(不透)；speed:速度1-100，默认为1
例<input onclick="fade('testDiv', 40)" type="button" value="透明度变化" />

var move = function(element, position, speed, callback){……}
//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10
例<input onclick="move('testDiv', {top:400})" type="button" value="垂直移动" />

var resize = function(element, size, speed, callback){……}
//长宽渐变：size:要改变到的尺寸 格式 {width:400, height:250}或{width:400}或{height:250}；speed:速度 1-100，默认为10
例<input onclick="resize('testDiv', {height:300})" type="button" value="改变高度" />

核心代码分析
1、获取一个元素的透明度
如果是IE浏览器，则攻取最终样式的滤镜filter的值，再通过正则表达式获取到透明度滤镜alpha的值，如果不存在透明度滤镜值，则透明度为100。
如果是非IE浏览器，那么可以获取最终样式的opacity属性，

function getOpacity(elem){
var alpha;
if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){
alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?(parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + '':
'100';
}else{
alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)['opacity'];
}
return alpha;
};

2、设置透明度
这个就简单了，不用管浏览器，通通的设置opacity及filter，
element.style.opacity = start / 100;
element.style.filter = ‘alpha(opacity=’ + start + ‘)’;
实际上这儿我偷了个懒，真正无懈可击的写法，应该是判断一下是否IE浏览器，因为在一些情况下可能使用多个滤镜，这时应该用正则替换alpha滤镜的值，而不是直接设置style.filter = ‘alpha(opacity=’ + start + ‘)’;

3、element.offsetWidth、element.offsetHeight与element.style.width、element.style.height的关系
只有在IE的border-content式盒模型情况下，这两个值才是相等的，即elementoffsetWidth==element.style.width+element.style.paddingLeft+element.style.paddingRight+element.style.borderLeftWidth+element.style.borderRightWidth
而我认为border-content式盒模型是符合修改元素尺寸时的心理预期的，对非border-content式盒模型情况下要作一个尺寸的修正。
在其它情况下应该对该值加以修正

if(!(navigator.userAgent.toLowerCase().indexOf('msie') != -1&&document.compatMode == 'BackCompat')){
//除了ie下border-content式盒模型情况外，需要对size加以修正
var CStyle=document.defaultView?document.defaultView.getComputedStyle(element,null):element.currentStyle;
if(typeof(size.width)=='number'){
size.width=size.width-CStyle.paddingLeft.replace(/D/g,'')-CStyle.paddingRight.replace(/D/g,'');
}
if(typeof(size.height)=='number'){
size.height=size.height-CStyle.paddingTop.replace(/D/g,'')-CStyle.paddingBottom.replace(/D/g,'');
}
}

有人认为以上的修正中默认了padding值的单位是px并且为整数，是不对的，
实际上经由我在ie及firefox下的测试，引用最终样式的padding值，必然是整数，并以px为单位。

4、关于把三个函数合并成一个通用动画函数
以上三个函数的主要逻辑都是一样的：
通过setInterval每隔一定时间修改元素的style属性，以达到动画效果。
所以，把三个函数合并成一个函数是可以的
只是需要在修改特定的属性时出于兼容性，必须作些处理，
因为不同的属性其值类型及单位不一样，不同浏览器下也有区别
如透明度 在非ie下为小数，在ie下是一个特别的滤镜设置
如颜色 一般是用16进制，并有#号前缀
预计这个通用的动画函数的参数会有点多，接口类下
function animator(element, interval, start, end, style, speed, tmp, callback){……}
说明
function animator(元素或元素ID, 计时器句柄,起始值,目标值,需修改的属性, 步进值(增量),值转换过滤方法(用于修改非普通递增递减形的数据，比如16进制颜色递增、前缀符号后缀单位修正), 回调函数)
function animator(‘testdiv’,'bgcolor’,'#336699′,’#aabbcc’,'backgroundColor’,2,changeColor,callback)
颜色修改方法示例（仅供参考，未测试）

changeColor=function(start,end,speed){
var _10to16 = function(color){
function tmp(index){
var tmp = color[index].toString(16);
return tmp.length == 1 ? "0" + tmp : tmp;
};
return "#" + tmp(0) + tmp(1) + tmp(2);
};
var x16to10 = function(color){
if(!/^#[0-9A-Fa-f]{3,6}$/i.test(color))retun color;
function tmp(index){
return color.charAt(index);
};
color = color.substring(1);
if(color.length == 3)
color = tmp(0) + tmp(0) + tmp(1) + tmp(1) + tmp(2) + tmp(2);
return [parseInt(tmp(0) + tmp(1), 16), parseInt(tmp(2) + tmp(3), 16), parseInt(tmp(4) + tmp(5), 16)];
};
var color = x16to10(start),
var end = x16to10(end),
var index = 3;
while(index--)
color[index] = color[index] < end[index] ? min(color[index] + speed, end[index]) : max(color[index] - speed, end[index]);
reutn color;
}

原文见：http://bbs.51js.com/viewthread.php?tid=86901

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• [原创]用JS控制显示子菜单个数 自动下拉
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined

先感谢一下北京腾讯给我们提供了场地，水，和公仔，今天听了很多“大虾”们的分享，感受颇深
就说一下小公司前端开发在研发中如何更好的协作吧 

今天会议上几个突出的词：“流程”，“沟通”，“专业“，“吃饭喝酒”：） 

那我就分别说一下自己的见解
1.“流程”，存在即是合理的，社会所必须承受的，就像高房价一样，很多时候“流程”被我们吹捧的就像一个神一样，貌似能解决一切问题，而实际上我认为，流程只是一个比较虚的东西，什么是流程？就是一种大家认可的协作方式，在中小企业里我认为无流程就是最好的流程 

2.“沟通”，为什么沟通？怎样沟通？今天腾讯的页面组leader说得好：“沟通就是情商，情商会从你的绩效考评里反映出来”，什么意思呢？也就是“强制沟通”，我认同这个观点，有效的沟通能够大大提升我们的效率，以及信息不对称等问题，我也希望所有的前端朋友们，一定要学会使用“沟通”这个武器，很多时候他能解决你技能所解决不了的问题 

3.“专业”，专业是什么？kejun兄补充的好-“专业就是饭碗”，我们要提升自身专业度，在研发流程中承担更多的职能，现在有多少公司里，后端不做一些“前端”的活呢？这也可能目前前端开发是“解耦”的最好途径 

4.“吃饭喝酒”，同事间朋友间，需要有一些私下的沟通与了解，适当的有些活动，能够在工作配合上更加的顺畅，当然了吃饭喝酒只是其中之一，更多的在轻松地环境下交流交流，增进一下友谊,本次讨论会后聚餐共16人哦：） 

kejun在最后公布了之前出的html面试题的答案 有兴趣的 移步这里
http://www.iamued.com/qianduan/1373.html

最后借用一张崔凯发的合影结尾吧：） 

第六期WEB标准化交流会合影{点击放大}

您可能还关注的？

• 第四期 WEB标准化交流会 参会总结
• 太NB了：Google Docs Ctrl + C 技术浅析
• WEB标准化交流会第九期：前端工程师的知识收集与管理
• 判断 iframe 是否加载完成的完美方法
• WEB标准化交流会第七期-人人都是”架构”师

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。
下周（3.27）交流会上我会公布答案  点击查看第六期WEB标准化交流会 总结

＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ================

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题（引自http://twitter.com/RageCarrier/status/10712084993）考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。

言归正传。这道题的考点：

考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。

考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对，你就能拿到100分。

对原题改进的结果：
html 4.01:
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说

xhtml 1.0:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>

加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>

我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>

转自kejun的blog：http://hikejun.com/blog/?p=548

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 6-27 互联网那点事聚会—北京站
• 判断 iframe 是否加载完成的完美方法
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• 第六期WEB标准化交流会 会后总结 By 刘钢

说说具体的吧：昨天的话题分为2个阶段 1.javascript 2.html5+CSS3

总结一下：
第一个阶段 由几位嘉宾先讲了一下 我听得有些糊涂 可能昨天的话题范围太广了 不过收益颇深
我比较统一kejun的观点 无论自己写的js库，第三方的库，主要都是从那几方面入手
1.DOM标准 提供一些标准的DOM操作功能[event,选择器,等等……]
2.ajax支持，FX（一些效果）支持
3.通用的一些widgets
那么现在我们所缺乏的 也就是JS的组织 与管理 ;月影讲的百度有啊在写的js库 也是更多的像这方面靠拢
[YUI3 已经有一些依赖机制 等方便我们管理自己的JS]

第二个阶段：可能HTML5+CSS3离我们真的很近 但是离用户却有些远的原因吧 话题交集在浏览器上面了

目前IE系列浏览器没有对HTML5和CSS3的支持 而在目前的情况 IE的市场占有率确实>50%的
所以话题最终结论可想而知
1.针对自己所处的行业与用户群来适当的进行一些尝试
2.可以用渐进增强的方式 为高级浏览器用户 提供更好的体验
3.作为专业的前端工程师 我们必须去学习与研究新的技术

再上几句会议上经典的：
你该换家公司为中国互联网做贡献了！
前端工程师的价值不在于切页面,也不在于极快地切页面
你用IE6！你全家都用IE6！
用IE收手续费 用其他浏览器优惠！
前端不可以挣钱　但可以省钱！

您可能还关注的？

• 第六期WEB标准化交流会 会后总结 By 刘钢
• 太NB了：Google Docs Ctrl + C 技术浅析
• WEB标准化交流会第九期：前端工程师的知识收集与管理
• 判断 iframe 是否加载完成的完美方法
• WEB标准化交流会第七期-人人都是”架构”师

ZenCoding项目地址：http://code.google.com/p/zen-coding/

先说环境 我是在MyEclipse > aptana 下面安装的Zen Coding

安装方法不难 建立一个项目 新建一个文件夹叫 script 然后把Zen Coding拷贝进去就可以了

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用 Aptana，下面的第一步可以跳过。

1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如 果你使用Aptana，可跳过这一步)
2. 在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding
3. 在新创建的项目中创建scripts文件夹
4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
5. 安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项：

• Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)
• 官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失

试用了一下发现确实很爽

具体的看下面介绍

做一个简单的Demo

html:xxs

div#header>div#logo.left+ul#menu>li*5>a

两行代码下去 生成的结果

</p>
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p>
<p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></p>
<p><head></p>
<p>	<title></title></p>
<p>	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /></p>
<p></head></p>
<p><body></p>
<div id="header">
<div id="logo" class="left"></div>
<ul id="menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<p></body></p>
<p></html></p>
<p>

方便快捷 下面介绍一下选择符用法

这里是一个支持的属性和操作符的列表：

* E

元素名称(div, p);

* E#id

使用id的元素(div#content, p#intro, span#error);

* E.class

使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;

* E>N

子代元素(div>p, div#footer>p>span);

* E+N

兄弟元素(h1+p, div#header+div#content+div#footer);

* E*N

元素倍增(ul#nav>li*5>a);

* E$*N

条目编号 (ul#nav>li.item-$*5);

具体的还要等我用熟了再给大家介绍了

本文部分内容转自互联网

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• 第六期WEB标准化交流会 会后总结 By 刘钢
• kejun的HTML面试题答案揭晓

vfresh兄弟已经写了一个新版的概述 我就直接转载过来了

修改内容：

1. .add() 支持 .add( selector, context ) 方式
2. 以下增加支持处理function方式：.addClass() .after() .before() .append() .css() .html() .prepend() .removeAttr() .removeClass() .replaceWith() .text() .toggleClass() .val() .wrap() .wrapAll() .wrapInner()
3. .bind() 支持批量绑定事件
4. .closest()支持第二个参数(筛选元素的容器)，优化效率。用法：.closest( selector, [ context ] )
5. .data() 支持批量设值 $('body').data({one: 1, two: 2});
6. .index() 如果无参数，则返回在它兄弟级元素集合中的索引值；并支持使用选择器(selector)过滤
7. jQuery() 如果无参数，会返回一个空的数组（旧版本返回document）
   用 jQuery() 创建DOM时，可以使用第二个参数来设置属性值、绑定事件 查看示例
8. .offset() 新增功能可以直接设置元素相对于document的坐标，并支持function参数
9. jQuery.param() 第二个参数(布尔值)，可以设定是否进行URI编码

新增内容：

1. .clearQueue() 清除.queue()生成的队列，如无参数将清除fx中的队列；类似于.stop(true)
2. jQuery.contains() 检测是元素否包含目标

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

3. .delay() 延迟执行队列

<!DOCTYPE html>
<html>
<head>
  <style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>

<script>
    $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
</script>
</body>
</html>

4. .detach() 返回从元素数组中移除的匹配元素。
5. .focusin() 是.bind(‘focusin’, handler)的简写方式。
6. .focusout() 是.bind(‘focusout’, handler)的简写方式。
7. .has() 筛选出包含有指定元素的集合

<div id="a"><strong>这个会被选中</strong></div>
	<div id="b">这个选不中</div>
	<script type="text/javascript">
	$('div').has('strong').css('color','red');
	</script>

8. jQuery.isEmptyObject() 检测对象是否为空值

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

9. jQuery.isPlainObject( object ) 检测是否为pain object

jQuery.isPlainObject({});	//true
	jQuery.isPlainObject('{}');	//false

10. .nextUntil([ selector ]) 查找当前元素之后到selector(参数)之间的同辈元素

<div id="a1">3232323</div>
<div id="a"><strong>这个会被选中</strong></div>
<div id="b">这个选不中</div>
<div id="c">ccc</div>
<div id="d">ccc</div>
<script type="text/javascript">
$('#a').nextUntil('#d');	//取得[#b,#c]
</script>

11. .prevUntil([ selector ]) 查找当前元素之前到selector(参数)之间的同辈元素
12. .parentsUntil( [ selector ] ) 取得一个包含着所有匹配元素的祖先元素（直到找到selector截止）的元素集合
13. jQuery.noop 空函数，当想定义一个空函数时可以用这个。
14. .toArray() 取得所有匹配的 DOM 元素集合，有点类似于.get()
15. .unwrap() 移除匹配元素的父级

您可能还关注的？

• YUI3设计中的激进和妥协
• 转：评论jQuery是魔鬼还是天使？
• 太NB了：Google Docs Ctrl + C 技术浅析
• 微软的jQuery国际化插件
• 判断 iframe 是否加载完成的完美方法

随着网络的发展，浏览器具有更强的渲染更高级代码的能力，我们正逐步实现跨越所有平台和浏览器的目标。我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常，而且形成了鼓励创新、避免hack、重前端脚本的氛围。

网络是一个非常好的环境，也是一个有丰富的知识来分享的协作社区。我们想要有圆角，我们就实现了它；我们想要多背景图片，我们实现了它；我们想要 边框图片，我们也让它实现了。所以需求从来不是问题，否则，我们可能还都仍然在使用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就是基于角度转动一个对象并可用于内联元素和块级元素，它可以实现很酷的效果。

#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)来收缩或者缩小一个元素。

#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，这可以在你的导航上添加一个小小的趣味。

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

translate

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

#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轴的倾斜度数。

#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变换的原理是通用的。

让我们来看一个例子吧：

#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都支持该功能。

链式变形

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

#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);
}

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

#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等描述性参数。几个例子：

.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转换实现。

#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。

#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

您可能还关注的？

• 揭秘HTML5和CSS3(2)
• 揭秘HTML5和CSS3(1)
• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 基于 HTML5 的 Windows 画图程序

<div class="Area">
  <div id="menu1" class="main_tit">
	<h2><a href="http://www.iamued.com">IamUed.com-前端开发</a></h2>
	<ul  class="sublist">
		<li><a href="http://www.iamued.com">javascript</a></li>
		<li><a href="http://www.iamued.com">Ria</a></li>
		<li><a href="http://www.iamued.com">ActionScript</a></li>
		<li><a href="http://www.iamued.com">Flash</a></li>
		<li><a href="http://www.iamued.com">Flex</a></li>
		<li><a href="http://www.iamued.com">W3C</a></li>
		<li><a href="http://www.iamued.com">xhtml</a></li>
	</ul>
  </div>
  一级内具体内容
</div>

可以看到 对于程序输出来讲 这样的结构不需要任何逻辑 相对代码结构清晰整洁

核心JS代码如下

//核心方法 传送一个数组参数
function submenumore(menuarr)
{
    for(var j=0;j<menuarr.length;j++)//循环该数组
    {
        var listli=document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].getElementsByTagName("li");//根据数组获取到该子菜单的li
        if(listli.length > 5)//如果子菜单数量大于5
        {
            var newimg=document.createElement("a");//新建一个a元素 作为大于5个之后显示的小图标容器
            newimg.className="moreimg";//给a元素设置一个样式
            newimg.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释
            {
                showsubmore(this);
            }
            newimg.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释
            {
                hidesubmore(this);
            }
            var newul=document.createElement("ul");//新建一个Ul元素 用来存档多余的子菜单
            newul.className="sublistmore";//给新的UL设置样式
            for(var i=5;i<listli.length;i++)
            {
                newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里
                i--;
            }
            newul.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释
            {
                this.style.display="block"
            }
            newul.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释
            {
                this.style.display="none"
            }
            var imgli=document.createElement("li");//新建一个li元素
            imgli.appendChild(newimg);//将之前建立的A元素 添加到这里 为了页面结构统一 可以比较好的调整样式
            document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].insertBefore(imgli,null);//将新建的LI插入到5个子菜单后面
            document.getElementById(menuarr[j]).appendChild(newul);//将多余子菜单加入到数组所传的容器内
        }
    }
}

这里要解释一个地方

 for(var i=5;i<listli.length;i++)
  {
     newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里
     i--;
  }

这里为什么要i–呢
由于读取出来的是一个引用对象
所以将之前数组内对象 添加到新的 对象里
之前的数组length将-1
所以将i–以获得之前数组的连贯对象

在代码中用到了2个之前收集的方法 主要是为了兼容各种浏览器

//该函数主要取得对象距离浏览器的真实距离Offset
function GetRealOffset(o)
{
    var elem = o;
    var leftOffset = elem.offsetLeft;
    var topOffset = elem.offsetTop;
    var parent = elem.offsetParent;
    while(parent)
    {
        leftOffset += parent.offsetLeft;
        topOffset += parent.offsetTop;
        parent = parent.offsetParent;
    }
    var Offsets = new Object();
    Offsets.top = topOffset;
    Offsets.left = leftOffset;
    return Offsets;
}
//该函数主要用于取得元素的兄弟节点 由于火狐下兄弟节点将TextNode也计算在内 所以用该函数兼容
function getnextSibling(o)
{
    do
    {
        o = o.nextSibling;
    }
    while (o.nodeType != 1)
    return o;
}

其他的更多的是页面样式的问题 不做过多解释了

查看DEMO
下载代码
转载请注明：转自我是UED-原文链接:http://www.iamued.com/qianduan/1010.html

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined