效果图:
引用 :
<!-- 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>