无主题 · 开发技术博客

博客打赏功能代码分享

应@窝客资源 要求,将打赏功能代码分享。

代码分享

打赏按钮样式和HTML代码

<style>
.dashang {
    border-left: 6px #E78384 solid;
    border-right: 6px #E78384 solid;
    background: #f4f4f4;
    text-align: left;
    margin: 20px 0 20px 0;
    padding: 20px 0 20px 10px;
    color: #333;
    font-size: 9pt;
    line-height: 22px;
    text-align: center;
}

.dashang p {
    font-size: 15px;
}

.dashang .button {
    padding: 6px 30px;
    font-size: 17px;
    font-weight: bold;
    color: white;
    background-color: #E78384;
    border-radius: 4px;
}
</style>

<div class="dashang">
    <p>如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!</p> 
    <a class="button" href="javascript:;">¥ 打赏博主</a> 
</div>

弹出层(modal)样式和html代码

<style>
.dashang-modal {
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.dashang-modal .bg {
    position: absolute;
    opacity: .6;
    filter: alpha(opacity=30);
    background: #000;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.dashang-modal .content {
    width: 390px;
    height: 425px;
    top: 50%;
    left: 50%;
    margin: -190px 0 0 -195px;
    font-size: 14px;
    background: #E8EEF3;
    position: fixed;
    padding: 0 20px;
    z-index: 9999;
    overflow: hidden;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.dashang-modal .close {
    position: absolute;
    top: 15px;
    right: 20px;
    font: 400 24px/24px Arial;
    width: 20px;
    height: 20px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    font-weight: 700;
    line-height: 20px;
    opacity: .6;
    filter: alpha(opacity=20);
}

.dashang-modal .title {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    margin: 40px 0 0;
    color: #555;
}

.dashang-modal .tab {
    text-align: center;
    margin: 20px 0;
}

.dashang-modal .tab span {
    font-size: 14px;
    padding: 3px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    cursor: pointer;
    background: #fff;
    margin: 12px 5px;
}

.dashang-modal .img {
    text-align: center;
    margin: 0 0 20px 0;
}
</style>

<div class="dashang-modal" style="display: block;">
    <div class="bg"></div>
    <div class="content"> <i class="close">x</i> 
        <div class="title">如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!</div>
        <div class="tab"> <span class="curr" dashang="wechat">微信</span>  <span dashang="alipay" class="">支付宝</span>  <span dashang="qqwallet" class="">QQ钱包</span> 
        </div>
        <div class="img">
            <img alt="无主题 开发技术博客 微信打赏二维码" src="http://res.wuzhuti.cn/wp-content/uploads/2016/12/dashang-wechat.png" id="dashang-wechat" style="display: inline-block;">
            <img alt="无主题 开发技术博客 支付宝打赏二维码" src="http://res.wuzhuti.cn/wp-content/uploads/2016/12/dashang-alipay.png" id="dashang-alipay" style="display: none;">
            <img alt="无主题 开发技术博客 qq钱包打赏二维码" src="http://res.wuzhuti.cn/wp-content/uploads/2016/12/qqwallet.png" id="dashang-qqwallet" style="display: none;">
        </div>
    </div>
</div>

打赏modal弹出事件绑定

        $('.dashang-modal .tab span').on('click',function(){
        var $this = $(this)
            dashang = $this.attr('dashang');
        $('.dashang-modal .img img').hide(200);
        $('#dashang-'+dashang).show(200);

        $('.dashang-modal .tab span').removeClass('curr');
        $this.addClass('curr');
    });

    $('.dashang-modal .close,.dashang-modal .bg').on('click',function(){
        $('.dashang-modal').hide(200);
    });


    $('.dashang .button').on('click',function(){
        $('.dashang-modal').show(200);
    });

方便大家使用,我上传了一个html demo

下载地址 链接: https://pan.baidu.com/s/1jIv8m3s 密码: 2qu3

二维码获取方式

以下所有获取二维码方法截止到2017-03-20最新版本客户端,截图为iPhone版本

微信

右上角+号 -> 收付款 -> 我要收款

QQ

右上角+号 -> 收付款 -> 我要收款

支付宝

右上角+号 -> 收钱

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏博主
相关文章:
站内评论 新浪微博评论
发表评论
评论(16)
没有看到评论?强制刷新
评论 (16)
引用 (0)
  • 9楼
    http://www.chun.yihuanghou.com/衣皇后 :

    对你爱爱爱不完,我可以天天月月年年看你博客到永远!

    2017.04.5 15:52 中国香港 | Windows 7 | 搜狗浏览器 2.X 回复
  • 8楼
    http://www.yihuanghou.com/?ic=wen衣皇后 :

    从百度进来的,博客不错哦!

    2017.04.3 16:49 美国加利福尼亚 | Windows 7 | 搜狗浏览器 2.X 回复
  • 7楼
    http://www.hlddjwl.com葫芦岛网站建设 :

    这个好,正需要,帮我解决了问题,感谢!

    2017.04.1 11:47 中国辽宁葫芦岛 | Windows 7 | Firefox 51.0 回复
  • 6楼
    http://www.yihuanghou.com/衣皇后 :

    学习使人进步,到此拜读!

    2017.03.31 12:55 美国加利福尼亚 | Windows 7 | 搜狗浏览器 2.X 回复
  • 5楼
    44 :

    好几百

    2017.03.23 21:50 中国四川成都 | Windows 10 | QQ浏览器 9.5.10548.400 回复
  • 4楼
    http://www.et59.comET旅行者 :

    真不错,加油

    2017.03.21 12:01 中国北京北京 | Windows 10 | Chrome 51.0.2704.106 回复
  • 3楼
    增达网 :

    真是时光荏苒!

    2017.03.21 10:43 美国密苏里州 | Windows 7 | 搜狗浏览器 2.X 回复
  • 2楼
    http://www.liujilu.com留记录 :

    可以用、谢谢站长

    但是你这微信、qq、支付宝的二维码是怎么生成的啊

    2017.03.18 11:57 中国广东珠海 | Windows 7 | Chrome 56.0.2924.87 回复

    • 管理员
      http://wuzhuti.cn小武 :

      运行对应的APP 我要收款,就是这个收款二维码

      2017.03.20 10:51 中国辽宁大连 | Mac OS 10 | Safari 602.2.14 回复

    • 管理员
      http://wuzhuti.cn小武 :

      更新了一下文章,可以参考一下。

      2017.03.20 11:25 中国辽宁大连 | Mac OS 10 | Safari 602.2.14 回复
      • http://www.liujilu.com留记录 :

        @ http://wuzhuti.cn小武 : 这些都是可以不用设置金额的吗?还是需要设置固定的金额?

        2017.03.20 15:00 中国广东珠海 | Windows 7 | Chrome 56.0.2924.87 回复

        • 管理员
          http://wuzhuti.cn小武 :

          可以不设置金额,也可以设置固定金额。。打赏建议还是不设置固定金额为好

          2017.03.20 15:01 日本 | Mac OS 10 | Safari 602.2.14 回复
          • http://www.liujilu.com留记录 :

            @ http://wuzhuti.cn小武 : 秒回、厉害了站长!谢谢、我以为不设置就不能收款

            2017.03.20 15:02 中国广东珠海 | Windows 7 | Chrome 56.0.2924.87 回复

            • 管理员
              http://wuzhuti.cn小武 :

              恰好看见邮件提醒,所以回复比较快

              2017.03.20 15:07 日本 | Mac OS 10 | Safari 602.2.14 回复
              • http://www.liujilu.com留记录 :

                @ http://wuzhuti.cn小武 : 谢谢了、站长!

                2017.03.20 15:09 中国广东珠海 | Windows 7 | Chrome 56.0.2924.87 回复
  • 1楼
    窝客资源 :

    看到了,万分感谢

    2017.03.13 13:16 中国浙江台州 | Windows 7 | Chrome 56.0.2924.87 回复
  • 还没有Trackback