先来看下本次需要导入的文件：
第一个是jquery.js，这个不多说；
第二个是jquery.zclip.js，第三个是zeroClipboard.swf ，这两个文件的下载链接：http://www.bootcdn.cn/zclip/
那么如何使用上面链接 呢？
1. 复制上面链接在浏览器打开，其中zeroClipboard.swf打开会直接下载，如果你的浏览器不会直接下载，可以ctrl+s保存到本地，下载成功后会提示下面的信息，点击“保留”即可，然后复制到项目制定目录下（path配置项的路径可是该目录的绝对路径，也可以是相对路径，我在调试的时候发现，直接复制上面链接放在path里面会报错的。）
2.插件的话，根据需要下载源文件还是压缩文件，这里下载的是 jquery.zclip.js，下载方法同上（复制链接打开，ctrl+s保存在本地，可以直接使用该链接）。
先看第一个效果图：
点击复制链接，复制输入框的内容到粘贴板上。下面是html代码，比较粗糙。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" value="www.baidu.com" id="link"> <span id="copyBtn">复制链接</span> <script src="jquery.min.js"></script> <script src="jquery.zclip.js"></script> <script> $('#copyBtn').zclip({ path: "zeroClipboard.swf", copy: function(){ return $('#link').val(); }, afterCopy:function(){/* 复制成功后的操作 */ alert("复制成功！"); } }); </script> </body> </html>
以上代码经测试，在IE8下点击是没有效果的。因为不知道如何使这个插件兼容IE8，所以下面换一种方式来兼容IE8：
点击按钮后的弹框效果图：
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="sharebtn">复制</div> <!--IE8下显示的复制分享链接弹框--> <div id="copyLayer" style="display: none;padding: 3%;"> <p>方法一： 快捷键Ctrl+c 复制</p> <p>方法二： 鼠标右键选择复制</p> <textarea id="copyContent" name="" rows="6" style=" 98%;"></textarea> </div> <script src="jquery.min.js"></script> <script src="jquery.zclip.js"></script> <script src="layer/layer.js"></script> <script> var urlPath = window.location.href; $('.sharebtn').click(function(){ //如果$.support.leadingWhitespace为false，则是IE8及以下浏览器 if(!$.support.leadingWhitespace){ layer.open({ type: 1, //html内容显示模式 title: ['复制链接分享', 'font-size:16px;'], area: ['500px', '300px'], //宽高 content: $("#copyLayer"), btn: '确定', offset: '30%', shade: 'background-color: rgba(0,0,0,.5)', success: function(){ $("#copyContent").val(urlPath); //显示链接内容 $("#copyContent").select(); //选中链接内容 } }); } }) //IE9+及主流浏览器 if($.support.leadingWhitespace){ //链接复制分享 - 点击复制 $('.sharebtn').zclip({ path: "zeroClipboard.swf", copy: function(){ return urlPath; }, afterCopy:function(){ layer.open({ content: '复制成功!', btn: '确定', time: 3000, offset: '30%', shade: 'background-color: rgba(0,0,0,.5)', shadeClose: true }); } }); } </script> </body> </html>
这里是通过判断是否是IE8浏览器，自动选中分享链接，但是需要通过手动复制，最终实现分享功能。