内容
打赏是什么？简单地说，就是您在网上发布的的原创内容，包括文章、图片、视频等，如果用户觉得好，看着喜欢，就可以通过奖赏钱的形式来表达对您的赞赏。这是互联网新兴的一种非强制性的付费模式，有良好的用户体验。
添加微信/支付宝打赏功能对我来说其实也是为了折腾而折腾，想必很少人会在网上阅读一篇文章给别人打赏的，不过话又说回来，万一中奖了呢？今天就分享一个jQuery文章页二维码扫码打赏功能的代码
jQuery文章页实现微信支付宝二维码扫码打赏功能
jQuery打赏功能原理是点击「 打赏 」按钮之后弹出弹出微信支付宝二维码扫码打赏页面，这项功能仿的是畅言的打赏插件，适用于大部分网站，下面是效果图：
打赏功能 HTML 代码：
根据需要，将需要插入打赏功能的页面、模板添加下面的 html 代码；
!-- 打赏 --
div class=content style=margin:20px 0;
pa href=javascript:void(0) onClick=dashangToggle() class=dashang title=打赏，支持一下打赏/a/p
div class=hide_box/div
div class=shang_box
a class=shang_close href=javascript:void(0) onClick=dashangToggle() title=关闭img src=img/close.jpg alt=取消 //a
img class=shang_logo src=img/dslogo.png alt=免费软件之家 /
div class=shang_tit
p感谢您的支持，我会继续努力的!/p
/div
div class=shang_payimg
img src=img/alipayimg.jpg alt=扫码支持 title=扫一扫 /
/div
div class=pay_explain扫码打赏，你说多少就多少/div
div class=shang_payselect
div class=pay_item checked data-id=alipay
span class=radiobox/span
span class=pay_logoimg src=https://cdn-1251432850.file.myqcloud.com/zanzhusoft/alipay.jpg alt=支付宝 //span
/div
div class=pay_item data-id=weipay
span class=radiobox/span
span class=pay_logoimg src=https://cdn-1251432850.file.myqcloud.com/zanzhusoft/wechat.jpg alt=微信 //span
/div
/div
div class=shang_info
p打开span id=shang_pay_txt支付宝/span扫一扫，即可进行扫码打赏哦/p
pPowered by a href=http://www.softhome.cc/ target=_blank title=免费软件之家免费软件之家/a，我们的分享，需要您的支持！/p
/div
/div
/div
script type=text/javascript
$(function(){
$(.pay_item).click(function(){
$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
var dataid=$(this).attr('data-id');
$(.shang_payimg img).attr(src,img/+dataid+img.jpg);
$(#shang_pay_txt).text(dataid==alipay?支付宝:微信);
});
});
function dashangToggle(){
$(.hide_box).fadeToggle();
$(.shang_box).fadeToggle();
}
/script
!-- 打赏 --
css 代码：
将 css 代码放到网站的XX.css 文件中即可，可根据实际修改：
style type=text/css
.content{width:80%;margin:200px auto;}
.hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;}
.shang_box{width:540px;height:540px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;}
.shang_box img{border:none;border-width:0;}
.dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;}
.dashang:hover{opacity:0.8;padding:15px;font-size:18px;background: #06f;}
.shang_close{float:right;display:inline-block;}
.shang_logo{display:block;text-align:center;margin:20px auto;}
.shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background: url('img/cy-reward-title-bg.jpg');font-family: 'Microsoft YaHei';margin-top: 7px;margin-right:2px;}
.shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;}
.shang_payimg{width:130px;padding:17.5px;margin:22px auto 0; position: relative;box-sizing: content-box;height:130px;background: url('img/code-bg.jpg');}
.shang_payimg img{display:block;text-align:center;width:140px;height:140px; }
.pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;}
.radiobox{width: 16px;height: 16px;background: url('img/radio2.jpg');display: block;float: left;margin-top: 5px;margin-right: 14px;}
.checked .radiobox{background:url('img/radio1.jpg');}
.shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;}
.shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;}
.shang_info{clear:both;}
.shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;}
/style
相关文件下载地址：
插件用途：打赏功能
插件授权：免费
下载jQuery 打赏插件源代码及图片素材 | 来自@免费软件之家
*特别声明：资源收集自网络或用户上传，本网站所提供的电子文本仅供参考，请以正式出版物为准。电子文本仅供个人标准化学习、研究使用，不得复制、发行、汇编、翻译或网络传播等。如有侵权，请联系我们处理。