首页 > 代码库 > jQuery-zclip实现复制内容到剪切板

jQuery-zclip实现复制内容到剪切板

2024-09-05 18:01:29   213人阅读

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>

 

jQuery-zclip实现复制内容到剪切板


联系
我们