jQuery-zclip是一個復制內容到剪貼板的jQuery插件，使用它我們不用考慮不同瀏覽器和瀏覽器版本之間的兼容問題。jQuery-zclip插件需要Flash的支持，使用時記得安裝Adobe Flash Player。
本來以為，復制粘貼很簡單，沒想到還需要插件。
找了很多，這個jquery-zclip的插件算是不錯的。
這里需要注意的就是，這個插件，必須在服務器的環境中才能正常顯示效果。
jquery.zclip.min.js插件
文件放在服務器下面才能運行：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .opa_1, #share_wrap .opa_2, #share_wrap .opa_3 { display: inline-block; width:40px; float: left; position: relative; margin: 0 30px 0 400px; } .opa_1 a { display: inline-block; width: 48px; height: 44px; /*background: url(../Images/member/invite_icon.png) scroll no-repeat center center;*/ background-position: -0px -0px; vertical-align: top; font-size: 12px; color: #191919; text-align: center; line-height: 1; padding: 52px 0 0 0; float: left; margin: 0; position: relative; } .copylink-wrap { width: 644px; height: 130px; position: absolute; z-index: 99; border: 1px solid #d1d1d1; padding: 30px 20px; background: #fff; border-radius: 8px; left: -307px; top: 70px; display: none; } .copylink-wrap .arrow { width: 19px; height: 9px; /*background: url(../Images/member/triggleUp.png) no-repeat;*/ position: absolute; top: -9px; } .copylink-wrap p { font-size: 14px; color: #191919; padding-bottom: 10px; } .share-input { position: relative; } .share-input span { color: #18a1ff; font-size: 14px; width: 480px; height: 40px; display: inline-block; vertical-align: middle; line-height: 38px; background-color: #fff; border: solid 1px #dbdbdb; padding: 0 0 0 8px; float: left; } #share_wrap input { width: 110px; float: left; margin-left: 10px; } [class*="u-btn-"] { display: block; width: 100%; border: none; border-radius: 3px; text-decoration: none; cursor: pointer; text-align: center; } .u-btn-i2, .u-btn-s2, .u-btn-n2 { height: 40px; font-size: 16px; } .u-btn-i2 { border-bottom: 3px solid #da0000; line-height: 37px; } .u-btn-i1, .u-btn-i2, .u-btn-i3, .u-btn-i4 { color: #fff; background-color: #f52c40; border-bottom: 4px solid #da0000; } .u-btn-i2:hover { border-bottom: 4px solid #b40a0a; } .u-btn-i1:hover, .u-btn-i2:hover, .u-btn-i3:hover, .u-btn-i4:hover { border-bottom: 4px solid #b40a0a; background-color: #d71326; color: #fff; } .share-input input { width: 110px; float: left; margin-left: 10px; } .opa_1:hover .copylink-wrap{display: block;} </style> <!--引入jQuery-zclip相關js及swf文件--> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.zclip.min.js"></script> </head> <body> <div class="opa_1"> <a class="bds_copylink" href="javascript:void(0)">復制鏈接</a> <div class="copylink-wrap"> <div class="arrow" style="left: 50%;"></div> <p>把鏈接分享給好友</p> <div class="share-input"> <span id="copy_add">https://passport.gaosouyi.com/Index/register/rmid/1446577.html</span> <input id="btnCopyAddress" type="button" value="復制鏈接" class="u-btn-i2"> </div> </div> </div> <script type="text/javascript"> $(function(){ /*$(".opa_1").one('mouseover',function(){ $('.copylink-wrap').show(); });*/ //復制鏈接 $(".opa_1").hover(function() { $(".copylink-wrap").show(); }, function(){ var obj = $(this).find(".copylink-wrap"); delay(obj); }) //延遲 function delay(obj){ var onoff = false; var timer; obj.hover(function(){ onoff = true; $(this).show(); clearTimeout(timer); },function(){ onoff = false; $(this).hide(); }); if(!onoff){ timer = setTimeout(function(){obj.hide();},100); } } $("#btnCopyAddress").one("mouseover",function(){//用mouseover不要用hover,事件用one綁定一次不會重復再綁定 $(this).zclip({ path:'ZeroClipboard.swf', //記得把ZeroClipboard.swf引入到項目中 copy:function(){ return $('#copy_add').text(); },
beforeCopy:function(){/* 按住鼠標時的操作 */
$(this).css("color","orange");
},
afterCopy: function () { alert("ok"); } /* 復制成功后的操作 */
});
});
});
</script>
</body>
</html>