如何给自己的网站加上打赏功能

2019.11.20 - 宅先生 Hot

        首先,直接看效果图:

        代码实现:

        ①打赏按钮的HTML

<span><a href='javascript:;' class='shang-btn'><i></i> 打赏</a></span>

        至于打赏按钮的样式,根据自己网站自行制作。

        ②下面是打赏弹窗的HTML部分

<!-- 打赏代码段 -->
<div class="dashang_box">
<div class="hide_box"></div>
<div class="shang_box">
<a class="shang_close" href="javascript:void(0)" title="关闭">
<img src="__PUBLIC__/images/dashang/close.jpg" alt="取消" />
</a>
<div class="shang_tit">
<p>感谢您的支持,我会继续努力的!</p>
</div>
<div class="shang_payimg">
<img src="__PUBLIC__/images/dashang/rhst91qstrwfimg.png" alt="扫码支持" title="扫一扫" />
</div>
<div class="pay_explain">人生百态皆无常,最是一颗感恩心</div>
<div class="shang_payselect">
<div class="pay_item checked" data-id="rhst91qstrwf">
<span class="radiobox"></span>
<span class="pay_logo"><img src="__PUBLIC__/images/dashang/rhst91qstrwf.jpg" alt="支付宝" /></span>
</div>
<div class="pay_item" data-id="rm67d8m5578r">
<span class="radiobox"></span>
<span class="pay_logo"><img src="__PUBLIC__/images/dashang/wechat.jpg" alt="微信" /></span>
</div>
</div>
<div class="shang_info">
<p>打开<span class="shang_pay_txt">支付宝</span>扫一扫,即可进行扫码打赏</p>
<p>所得打赏均用于域名续费、服务器购买等维持平台正常运营的必要支出</p>
</div>
</div>
</div>

        ③打赏弹窗的CSS部分

/*打赏弹窗效果 start*/
.dashang_box {
width: 80%;
margin: 10px auto;
}
.dashang_box .hide_box {
z-index: 9999;
filter: alpha(opacity=50);
background: #666;
opacity: 0.7;
-moz-opacity: 0.7;
left: 0;
top: 0;
height: 99%;
width: 100%;
position: fixed;
display: none;
}

@media only screen and (max-width:700px) {
.dashang_box .shang_box {
width: 76%;
height: 480px;
margin-left: -40%;
margin-top: -250px;
}

.dashang_box .shang_tit {
margin-top: 10px;
}
}

@media only screen and (min-width:700px) {
.dashang_box .shang_box {
width: 540px;
height: 540px;
margin-left: -280px;
margin-top: -280px;
}

.dashang_box .shang_tit {
background: url('../images/dashang/cy-reward-title-bg.jpg');
margin-top: 40px;
}
}

.dashang_box .shang_box {
padding: 10px;
background-color: #fff;
border-radius: 10px;
position: fixed;
z-index: 10000;
left: 50%;
top: 50%;
border: 1px dotted #dedede;
display: none;
}

.dashang_box .shang_box img {
border: none;
border-width: 0;
display: inline-block;
}
.dashang_box .shang_close {
float: right;
display: inline-block;
}
.dashang_box .shang_logo {
display: block;
text-align: center;
margin: 20px auto;
}
.dashang_box .shang_tit {
width: 100%;
height: 75px;
text-align: center;
line-height: 66px;
color: #a3a3a3;
font-size: 16px;
font-family: 'Microsoft YaHei';
margin-right:2px;
}
.dashang_box .shang_tit p {
color: #a3a3a3;
text-align: center;
font-size: 16px;
}
.dashang_box .shang_payimg {
width: 140px;
padding: 10px;
border: 3px solid #EA5F00;
margin: 0 auto;
border-radius: 3px;
height: 140px;
}
.dashang_box .shang_payimg img {
display: block;
text-align: center;
width: 140px;
height: 140px;
}
.dashang_box .pay_explain {
text-align: center;
margin: 10px auto;
font-size: 12px;
color: #545454;
}
.dashang_box .radiobox {
width: 16px;
height: 16px;
background: url('../images/dashang/radio2.jpg');
display: block;
float: left;
margin-top: 5px;
margin-right: 14px;
}
.dashang_box .checked .radiobox {
background: url('../images/dashang/radio1.jpg');
}
.dashang_box .shang_payselect {
text-align: center;
margin: 0 auto;
margin-top: 40px;
cursor: pointer;
height: 60px;
width: 280px;
}
.dashang_box .shang_payselect .pay_item {
display: inline-block;
margin-right: 10px;
float: left;
}
.dashang_box .shang_info {
clear: both;
}
.dashang_box .shang_info p, .dashang_box .shang_info a {
color: #C3C3C3;
text-align: center;
font-size: 12px;
text-decoration: none;
line-height: 2em;
}
/*打赏弹窗效果 end*/

        ④打赏功能实现JS,依赖jQuery

//打赏按钮
$('.shang-btn').on('click', function() {
$(".dashang_box .hide_box").fadeToggle();
$(".dashang_box .shang_box").fadeToggle();
});

//关闭打赏
$('.dashang_box .shang_close').on('click', function() {
$('.shang-btn').click();
});

//点击蒙版,关闭打赏
$('.dashang_box .hide_box').on('click', function() {
$('.shang-btn').click();
});

//切换打赏支付类型
$(".dashang_box .pay_item").on('click', function() {
$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
var dataid = $(this).attr('data-id');
$(".dashang_box .shang_payimg img").attr("src", "__PUBLIC__/images/dashang/"+dataid+"img.png");
$(".dashang_box .shang_pay_txt").text(dataid == "rhst91qstrwf" ? "支付宝" : "微信");
});

        以上,可实现网站打赏功能。参考链接:https://www.runoob.com/w3cnote/website-reward-button.html,可以到这里下载图片素材及相应源码。

- END -

各位看官,如果你觉得文章不错,请鼓励鼓励吧~~

  1. 游客 - 2019.11.22

    文章很受用!

    • 宅先生 - 2019.11.22

      你的喜欢是我前进的动力,谢谢!

TP5多模块配置多个顶级域名的解决方案

背景:我有两个域名:①sn1987.com;②beatlife.cn;同一个TP5框架下,有4个应用模块:①全站首页(个人履历);②Beatlife信息分享平台;③漫然图片分享社区;④LayAdmin运营管理后台。项目结构...

取消

您的支持,是我继续创作的动力!

扫码支持
人生百态皆无常,最是一颗感恩心

打开支付宝扫一扫,即可进行扫码打赏

所得打赏均用于域名续费、服务器租赁等维持平台正常运营的必要支出。

海报生成中...