先來看下本次需要導入的文件：
第一個是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瀏覽器，自動選中分享鏈接，但是需要通過手動復制，最終實現分享功能。