您的位置:首页 > 其它

百度分享自定义图标

2015-11-26 10:50 363 查看
<div class="F_share R">
<div class="bdsharebuttonbox">
<a class="bds_qzone" data-cmd="qzone" href="#"></a>
<a class="bds_tsina" data-cmd="tsina"></a>
<a class="bds_weixin" data-cmd="weixin"></a>
<a class="bds_tqq" data-cmd="tqq"></a>
</div>
</div>


<script>
window._bd_share_config = {
common: {
bdText: '',
bdDesc: '',
bdUrl: '',
bdPic: ''
},
share: [{
"bdSize": 32
}],
slide: [{
bdImg: 0,
bdPos: "right",
bdTop: 100
}],
image: [{
viewType: 'list',
viewPos: 'top',
viewColor: 'black',
viewSize: '32',
viewList: ['qzone', 'tsina', 'weixin', 'tqq']
}],
selectShare: [{
"bdselectMiniList": ['qzone', 'tsina', 'weixin', 'tqq']
}]
}
with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>


JS代码要注意viewList: ['qzone', 'tsina', 'weixin', 'tqq'], "bdselectMiniList": ['qzone', 'tsina', 'weixin', 'tqq']两个地方,要对应html中的data-cmd属性

"bdSize": 32; viewSize: '32',两个地方需要改为16,32,64的尺寸,图标也需要制作为16,32,64的尺寸


.F_share .bdsharebuttonbox a {width: 32px; height: 32px; display: inline-block; margin: 0px 5px;}
.F_share .bdsharebuttonbox .bds_qzone {background: url(../images/qz.png) no-repeat top center;}
.F_share .bdsharebuttonbox .bds_tsina {background: url(../images/weibo1.png) no-repeat top center;}
.F_share .bdsharebuttonbox .bds_weixin {background: url(../images/weixin.png) no-repeat top center;}
.F_share .bdsharebuttonbox .bds_tqq {background: url(../images/weibo2.png) no-repeat top center;}


最终效果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: