Zero Clipboard的实现原理
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将须要的内容传入Flash，再经过Flash的复制功能把传入的内容复制到剪贴板。javascript
Zero Clipboard的安装方法
首先须要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。
而后把在你要使用复制功能的页面中引入Zero Clipboard的js文件：ZeroClipboard.js
以下代码：
<script type="text/javascript" src="ZeroClipboard.js"></script>
注意：以上 ZeroClipboard.js, ZeroClipboard.swf须要放在同一路径下。若是不在同一路径，可以使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址
Zero Clipboard实现简单跨浏览器复制
var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor( true ); // 设置鼠标为手型
clip.setText("哈哈"); // 设置要复制的文本。
// 注册一个 button，参数为 id。点击这个 button 就会复制。
//这个 button 不必定要求是一个 input 按钮，也能够是其余 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可调换
这样，这样基本功能实现了，点击按钮就能够复制设置好的文本了。你可能注意到了，待复制的文本是固定的，若是想要动态改变的怎么办，好比复制一个输入框中的内容。不用担忧，下面会讲到的。
Zero Clipboard的高级功能
一、reposition() 方法
由于按钮上漂浮有一个 Flash 按钮，因此当页面大小发生变化时，Flash 按钮可能会错位，这样就点不着了。 没关系，Zero Clipboard 提供了一个 reposition() 方法，能够从新计算 Flash 按钮的位置。咱们能够将它绑定到 resize 事件上。以下面代码是在jQuery下实现的resize事件从新设置按钮位置：
$(window).resize(function(){
clip.reposition();
});
二、hide() 和 show() 方法
这两个方法能够隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。
三、setCSSEffects() 方法
当鼠标移到按钮上或点击时，因为有 Flash 按钮的遮挡，因此像 css “:hover”, “:active” 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先咱们须要将伪类改为类，好比：
#copy-botton:hover{border-color:#FF6633;}// 能够改为下面的 ":hover" 改为 ".hover"
#copy-botton.hover{border-color:#FF6633;}
咱们能够调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为咱们处理：将类 .hover 当成伪类 :hover 。
四、getHTML() 方法
若是你想本身实例一个 Flash ，不用 Zero Clipboard 的附着方法，那么这个方法就能够帮上忙了。它接受两个参数，分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如：
var html = clip.getHTML( 150, 20 );
你能够用 innerHTML 或直接 document.write(); 进行输出。
如下是测试输出的组装完毕的HTML 代码：
<embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" />
IE 的 Flash JavaScript 通讯接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。而且在写入 innerHTML 以前请确保该元素已经 appendChild 方法插入到 DOM 中。
Zero Clipboard 事件处理
Zero Clipboard 提供了一些事件，你能够自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 彻底载入后会触发一个事件 “load” 。
clip.addEventListener( "load", function(client) {
alert("Flash 加载完毕！");
});
Zero Clipboard 会将 clip 对象做为参数传入。即上例中的 “client” 。
还有 “load” 也能够写成 “onLoad”，其余的事件也能够这样。
其余事件还包括：
mouseOver 鼠标移上事件
mouseOut 鼠标移出事件
mouseDown 鼠标按下事件
mouseUp 鼠标松开事件
complete 复制成功事件
其中 mouseOver 事件和 complete 事件比较经常使用。
前面说过，若是须要动态改变待复制的内容，那 mouseOver 事件就能够派上用场了。例如须要动态复制一个 id 为 test 的输入框中的值，咱们能够在鼠标 over 的时候从新设置值。
clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 从新设置要复制的值
});
//复制成功：
clip.addEventListener( "complete", function(){
alert("复制成功！");
});
css