仿知乎专栏赞赏：支持支付宝和微信打赏

mt

给自己的博客加了一个支付宝和微信的赞赏功能，在文章的最底部，点击赞赏按钮，就会出现一个类似知乎专栏的赞赏弹窗，不过知乎的比较高级，它那个是调用微信的支付接口，我这个只是简单的使用了几张二维码图片替换，所以没法显示有哪些人打赏了。

代码如下：
1、htm代码

1. <div class="entry-shang text-center">
   
2.         <p>「真诚赞赏，手留余香」</p>
   
3.         <button class="zs show-zs btn btn-bred">赞赏</button>
   
4. </div>
   
5. <div class="zs-modal-bg"></div>
   
6. <div class="zs-modal-box">
   
7.         <div class="zs-modal-head">
   
8.                 <button type="button" class="close">×</button>
   
9.                 <span class="author"><img src="http://cn.gravatar.com/avatar/cffb5aa78e9e9c53fd89cc8c3e59580b?d=identicon&r=G&s=80"/>前端博客</span>
   
10.                 <p class="tip"><i></i><span>真诚赞赏，手留余香</span></p>
    
11. 
    
12.         </div>
    
13.         <div class="zs-modal-body">
    
14.                 <div class="zs-modal-btns">
    
15.                         <button class="btn btn-blink" data-num="2">2元</button>
    
16.                         <button class="btn btn-blink" data-num="5">5元</button>
    
17.                         <button class="btn btn-blink" data-num="10">10元</button>
    
18.                         <button class="btn btn-blink" data-num="50">50元</button>
    
19.                         <button class="btn btn-blink" data-num="100">100元</button>
    
20.                         <button class="btn btn-blink" data-num="1">任意金额</button>
    
21.                 </div>
    
22.                 <div class="zs-modal-pay">
    
23.                         <button class="btn btn-bred" id="pay-text">2元</button>
    
24.                         <p>使用<span id="pay-type">微信</span>扫描二维码完成支付</p>
    
25.                         <img src="images/alipay-2.png" id="pay-image"/>
    
26.                 </div>
    
27.         </div>
    
28.         <div class="zs-modal-footer">
    
29.                 <label><input type="radio" name="zs-type" value="alipay" class="zs-type" checked="checked"><span class="zs-alipay"><img src="images/alipay-btn.png"/></span></label>
    
30.                 <label><input type="radio" name="zs-type" value="wechat" class="zs-type"><span class="zs-wechat"><img src="images/wechat-btn.png"/></span></label>
    
31.         </div>
    
32. </div>

复制代码

2、js代码

1. function ZanShang(){
   
2.   this.popbg = $('.zs-modal-bg');
   
3.   this.popcon = $('.zs-modal-box');
   
4.   this.closeBtn = $('.zs-modal-box .close');
   
5.   this.zsbtn = $('.zs-modal-btns .btn');
   
6.   this.zsPay = $('.zs-modal-pay');
   
7.   this.zsBtns = $('.zs-modal-btns');
   
8.   this.zsFooter = $('.zs-modal-footer');
   
9.   var that = this;
   
10.   $('.show-zs').on('click',function(){
    
11.     //点击赞赏按钮出现弹窗
    
12.     that._show();
    
13.     that._init();
    
14.   })
    
15. }
    
16. ZanShang.prototype._hide = function(){
    
17.   this.popbg.hide();
    
18.   this.popcon.hide();
    
19. }
    
20. ZanShang.prototype._show = function(){
    
21.   this.popbg.show();
    
22.   this.popcon.show();
    
23.   this.zsBtns.show();
    
24.   this.zsFooter.show();
    
25.   this.zsPay.hide();
    
26. }
    
27. ZanShang.prototype._init = function(){
    
28.   var that = this;
    
29.   this.closeBtn.on('click',function(){
    
30.     that._hide();
    
31.   })
    
32.   this.popbg.on('click',function(){
    
33.     that._hide();
    
34.   })
    
35.   this.zsbtn.each(function(el){
    
36.     $(this).on('click',function(){
    
37.       var num = $(this).attr('data-num'); //按钮的对应的数字
    
38.       var type = $('.zs-type:radio:checked').val();//付款方式
    
39.       //根据不同付款方式和选择对应的按钮的数字来生成对应的二维码图片，你可以自定义这个图片的路径，默认放在当前images目录中
    
40.       //假如你需要加一个远程路径，比如我的就是
    
41.       //var src = 'http://caibaojian.com/wp-content/themes/blue/images/pay/'+type+'-'+num+'.png';
    
42.       var src = 'images/'+type+'-'+num+'.png';
    
43.       var text = $(this).html();
    
44.       var payType=$('#pay-type'), payImage = $('#pay-image'),payText = $('#pay-text');
    
45.       if(type=='alipay'){
    
46.         payType.html('支付宝');
    
47.       }else{
    
48.         payType.html('微信');
    
49.       }
    
50.       payImage.attr('src',src);
    
51.       payText.html(text);
    
52.       that.zsPay.show();
    
53.       that.zsBtns.hide();
    
54.       that.zsFooter.hide();
    
55. 
    
56.     })
    
57.   })
    
58. }
    
59. var zs = new ZanShang();

复制代码

注意保存images下的图片文件。