zoukankan      html  css  js  c++  java
  • 百度分享自定义图标

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

    最终效果

  • 相关阅读:
    HttpWebRequest 使用心得
    CDMA短信猫AT命令全集,CDMA短信猫二次开发所能使用的AT命令
    AT指令介绍及用法,AT 指令集合
    开发日记 1
    一个简单存储过程的性能分析
    At 拨号
    使用 WebBrowser 操作 js
    jQuery获取Select选择的Text和Value
    mysql远程连接速度慢的问题[未解决]
    JQuery AJAX
  • 原文地址:https://www.cnblogs.com/qigege/p/4996988.html
Copyright © 2011-2022 走看看