先来看下本次需要导入的文件：
第一个是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="width: 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浏览器，自动选中分享链接，但是需要通过手动复制，最终实现分享功能。