码迷,mamicode.com
首页 > 其他好文 > 详细

百度分享自定义图标

时间:2015-11-26 12:28:45      阅读:506      评论:0      收藏:0      [点我收藏+]

标签:

 <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;}

最终效果

技术分享

百度分享自定义图标

标签:

原文地址:http://www.cnblogs.com/qigege/p/4996988.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!