Javascript+html+css 一键分享推广链接

效果图:

引用 :

<!-- Bootstrap Stylesheet -->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen" />
	<!-- Uniform Stylesheet -->
	<link rel="stylesheet" href="plugins/uniform/css/uniform.default.css" />
	<!-- Main Layout Stylesheet -->
	<link rel="stylesheet" href="assets/css/fonts/icomoon/style.css" media="screen" />
	<link rel="stylesheet" href="assets/css/main-style.css" media="screen" />

引用 sharelink.css 代码

<link href="assets/css/sharelink.css" rel="stylesheet" />

ul, ol, li {
    list-style-type: none;
    vertical-align: 0
}

.keBottom {
    color: #FFF;
    padding-top: 25px;
    line-height: 28px;
    text-align: center;
    font-family: '微软雅黑';
    background: url(../images/bodyBg2.jpg) repeat-x top left;
    padding-bottom: 25px
}

.keTxtP {
    font-size: 16px;
    color: #ffffff;
}

.keUrl {
    color: #FFF;
    font-size: 30px;
}

    .keUrl:hover {
        text-decoration: underline;
        color: #FFF;
    }

.mKeBanner, .mKeBanner div {
    text-align: center;
}
/*弹出层 CSS*/
.gb_resLay {
    background: #FFFFFF;
    height: 170px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.gb_res_t {
    line-height: 58px;
    height: 58px;
    position: relative;
    font-size: 18px;
    text-align: center;
}

    .gb_res_t i {
        background: #FFEC94;
        height: 1px;
        overflow: hidden;
        left: 32px;
        top: 30px;
        right: 32px;
        position: absolute;
    }

    .gb_res_t span {
        background: #FFF;
        display: inline-block;
        padding: 0px 6px;
        position: relative;
        z-index: 2;
    }

.gb_resItms {
    margin: 0px 4%;
}

    .gb_resItms li {
        text-align: center;
        float: left;
        width: 16.66%;
        padding-bottom: 15px;
    }

.gb_resA img {
    height: auto;
    width: 60px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 500px) {
    .gb_resA img {
        width: 45px;
        margin-top: 5px;
    }
}

@media only screen and (max-width: 470px) {
    .gb_resItms li {
        width: 33.333%;
    }

    .gb_resLay {
        height: 290px;
    }

    .gb_resA img {
        width: 60px;
        margin-top: 0
    }
}

.bdsharebuttonbox a {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 10px !important;
    float: none !important;
    padding: 0 !important;
    display: block;
}

    .bdsharebuttonbox a img {
        width: 60px;
        height: 60px;
    }

.bdsharebuttonbox .s_tsina {
    background: url(../images/gbRes_6.png) no-repeat center center/60px 60px;
}

.bdsharebuttonbox .s_qzone {
    background: url(../images/gbRes_4.png) no-repeat center center/60px 60px;
}

.bdsharebuttonbox .s_tqq {
    background: url(../images/gbRes_5.png) no-repeat center center/60px 60px;
}

.bdsharebuttonbox .s_weixin {
    background: url(../images/gbRes_2.png) no-repeat center center/60px 60px;
}

.bdsharebuttonbox .s_sqq {
    background: url(../images/gbRes_3.png) no-repeat center center/60px 60px;
}

.bdsharebuttonbox .s_renren {
    background: url(../images/gbRes_1.png) no-repeat center center/60px 60px;
}

.bd_weixin_popup .bd_weixin_popup_foot {
    position: relative;
    top: -12px;
}

Css中引用的图片

 

Html 代码：

	<div class="widget-box">
										<h1>
											<i class="icon-zoom-in"></i>一键分享推广链接 <span>This is the place where Search started</span>
										</h1>
										<br />
										<div class="widget-content nopadding">


											<div class="gb_resLay">
												<div class="gb_res_t"><span>分享到</span><i></i></div>
												<div class="bdsharebuttonbox">
													<ul class="gb_resItms">
														<li><a title="分享到微信" href="#" class="s_weixin" data-cmd="weixin"></a>微信好友 </li>
														<li><a title="分享到QQ好友" href="#" class="s_sqq" data-cmd="sqq"></a>QQ好友 </li>
														<li><a title="分享到QQ空间" href="#" class="s_qzone" data-cmd="qzone"></a>QQ空间 </li>
														<li><a title="分享到腾讯微博" href="#" class="s_tqq" data-cmd="tqq"></a>腾讯微博 </li>
														<li><a title="分享到新浪微博" href="#" class="s_tsina" data-cmd="tsina"></a>新浪微博 </li>
														<li><a title="分享到人人网" href="#" class="s_renren" data-cmd="renren"></a>人人网 </li>
													</ul>
												</div>
											</div>
											<div style="margin: 0 auto; text-align: center;">

												<input id="txtName" name="txtName" runat="server" class="text-info span5" disabled="disabled" type="text" />
												<input type="button" class="btn btn-info" id="btnCopy" value="复制" />

											</div>
										</div>
									</div>

JS代码：

jquery.zclip.js 下载地址：https://github.com/patricklodder/jquery-zclip

	<!-- Core Scripts -->
		<script src="assets/js/jquery-1.8.2.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.zclip.js"></script>
           <script >

            $(document).ready(function () {
                //复制分享链接
                $("#btnCopy").zclip({
                    path: 'assets/js/ZeroClipboard.swf',
                    copy: $('#txtName').val(),
                    afterCopy: function () {
                        $.msgbox("<span style='font-size:12px;line-height:30px;'>复制成功,可以在朋友圈进行分享了。</span>", { type: "info", buttons: [{ type: "submit", value: "确定" }] });

                    }
                });
                //SNS 分享链接
                var vcode = "" + $("#txtName").val() + "";
                window._bd_share_config =
                {
    "common": {
        "bdSnsKey": {}, "bdText": vcode,
        "bdMini": "1",
        "bdMiniList": false,
        "bdPic": "",
        "bdStyle": "1",
        "bdSize": "16"
    }, "share": {},
    "image": {
        "viewList": ["weixin", "sqq", "qzone", "tqq", "tsina", "renren"],
        "viewText": "分享到：", "viewSize": "16"
    }, "selectShare": {
        "bdContainerClass": null,
        "bdSelectMiniList": ["weixin", "sqq", "qzone", "tqq", "tsina", "renren"]
    }
};
                with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src
                    = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];

            });

        </script>