ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
liuian 2024-12-30 05:16 77 浏览
看到新浪微博、百度百家等等平台上都带有文章“打赏”功能,觉得很新鲜,于是也想在自己的博客中加入“打赏”功能。
当然,加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞。
而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了)。
加入打赏功能纯粹是“觉得好玩”,就是这么简单,Just have a fun!(博主喜欢折腾,看见一个酷炫的功能就想去实现它)
先看一下这个打赏的Icon长什么样吧! 去站点试试打赏?=>www.zynblog.com
点击“打赏Icon”后会弹出一个二维码界面,各位老板可以选择使用是使用支付宝打赏还是微信打赏:
具体代码如下:(时间仓促,并为将其扩展为插件)
HTML:
<!--打赏按钮-->
<div style="margin-bottom:20px;">
<a title="打赏,支持一下" class="dashang" onclick="dashangToggle" href="javascript:void(0)">
</a>
</div>打赏遮罩层HTML:
<div class="content">
<div class="hide_box"><!--遮罩--></div>
<div class="shang_box">
<a class="shang_close" href="javascript:void(0)" onclick="dashangToggle" title="关闭">
<img src="/Content/dashangimg/close.jpg" alt="取消">
</a>
<div class="shang_tit">
<p>感谢您的支持,我会继续努力的!</p>
</div>
<div class="shang_payimg">
<img src="/Content/dashangimg/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_logo">
<img src="/Content/dashangimg/alipay.jpg" alt="支付宝">
</span>
</div>
<div class="pay_item" data-id="weixinpay">
<span class="radiobox"></span>
<span class="pay_logo">
<img src="/Content/dashangimg/wechat.jpg" alt="微信">
</span>
</div>
</div>
<div class="shang_info">
<p>打开<span id="shang_pay_txt">支付宝</span>扫一扫,即可进行扫码打赏哦</p>
</div>
</div>
</div>主要的JS:
//打赏
jQuery(".pay_item").click(function {
jQuery(this).addClass('checked').siblings('.pay_item').removeClass('checked');
var dataid = jQuery(this).attr('data-id');
jQuery(".shang_payimg img").attr("src", "/Content/dashangimg/" + dataid + "img.jpg");
jQuery("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
});
function dashangToggle {
jQuery(".hide_box").fadeToggle;
jQuery(".shang_box").fadeToggle;
};
顺带提供CSS:
1 .hide_box {
2 z-index: 999;
3 filter: alpha(opacity=50);
4 background: #666;
5 opacity: 0.5;
6 -moz-opacity: 0.5;
7 left: 0;
8 top: 0;
9 height: 99%;
10 width: 100%;
11 position: fixed;
12 display: none;
13 }
14
15 .shang_box {
16 width: 540px;
17 height: 540px;
18 padding: 10px;
19 background-color: #fff;
20 border-radius: 10px;
21 position: fixed;
22 z-index: 1000;
23 left: 50%;
24 top: 50%;
25 margin-left: -280px;
26 margin-top: -280px;
27 border: 1px dotted #dedede;
28 display: none;
29 }
30
31 .shang_box img {
32 border: none;
33 border-width: 0;
34 }
35
36 .dashang {
37 display: block;
38 margin: 5px auto;
39 text-align: center;
40 transition: all 0.3s;
41 width:50px;
42 height:50px;
43 background: url(../dashangimg/dashang.png) no-repeat scroll 0% 0% transparent;
44 }
45
46 .dashang:hover {
47 background: url(../dashangimg/dashanghover.png) no-repeat scroll 0% 0% transparent;
48 }
49
50 .shang_close {
51 float: right;
52 display: inline-block;
53 }
54
55 .shang_logo {
56 display: block;
57 text-align: center;
58 margin: 20px auto;
59 }
60
61 .shang_tit {
62 width: 100%;
63 height: 75px;
64 text-align: center;
65 line-height: 66px;
66 color: #a3a3a3;
67 font-size: 16px;
68 background: url('../dashangimg/cy-reward-title-bg.jpg');
69 font-family: 'Microsoft YaHei';
70 margin-top: 7px;
71 margin-right: 2px;
72 }
73
74 .shang_tit p {
75 color: #a3a3a3;
76 text-align: center;
77 font-size: 16px;
78 }
79
80 .shang_payimg {
81 width: 150px;
82 height: 150px;
83 border: 6px solid #EA5F00;
84 margin: 0 auto;
85 border-radius: 3px;
86 }
87
88 .shang_payimg img {
89 display: block;
90 text-align: center;
91 width: 140px;
92 height: 140px;
93 }
94
95 .pay_explain {
96 text-align: center;
97 margin: 10px auto;
98 font-size: 12px;
99 color: #545454;
100 }
101
102 .radiobox {
103 width: 16px;
104 height: 16px;
105 background: url('../dashangimg/radio2.jpg');
106 display: block;
107 float: left;
108 margin-top: 5px;
109 margin-right: 14px;
110 }
111
112 .checked .radiobox {
113 background: url('../dashangimg/radio1.jpg');
114 }
115
116 .shang_payselect {
117 text-align: center;
118 margin: 0 auto;
119 margin-top: 40px;
120 cursor: pointer;
121 height: 60px;
122 width: 280px;
123 }
124
125 .shang_payselect .pay_item {
126 display: inline-block;
127 margin-right: 10px;
128 float: left;
129 }
130
131 .shang_info {
132 clear: both;
133 }
134
135 .shang_info p, .shang_info a {
136 color: #C3C3C3;
137 text-align: center;
138 font-size: 12px;
139 text-decoration: none;
140 line-height: 2em;
141 }打赏样式
相关推荐
-
- windows许可证即将过期怎么回事
-
出现此情况的解决方法如下:1、如果在电脑出现“你的Windows许可证即将过期”窗口,然后在窗口中点击“转到设置”,2、点击完以后,需要找到安装的文件夹,需要注意的是安装的文件夹建议是C盘或者是系统盘。3、打开之后,在页面上找到一个红色按钮...
-
2026-01-01 04:55 liuian
- u盘在电脑上无法访问怎么办(为什么u盘在电脑上无法访问)
-
01U盘不被电脑识别。一般U盘打不开,很可能就是电脑系统自带的驱动的原因,我们可以开机按F8进入安全模式再退出,重启便可以了。02U盘接口供电不足,或许是USB连接的外口太多导致供电不足。我们可以使用...
- 笔记本电脑启动不起来是什么原因
-
11.检测电源线是否插好,电源线与电脑的接口是否有松动。22.检查充电器是否坏了,如果充电器坏了,那就换一个试试。33.如果不能,那就重新开机,一直按住F8键,使电脑进行最近一次的正确配置选项,再按回...
- 谷歌gmail邮箱(谷歌gmail邮箱下载)
-
吉邮Gmail中文名“吉邮”是全球最大的搜索引擎公司google推出的一款功能非常丰富的,容量达到2GB的免费电子邮箱,即E-mail……(gmail邮箱为争得竞争优势早已将邮箱扩容置2GB,但至...
- 光盘如何刻录文件(光盘如何刻录文件内容)
-
一句话概括:准备光盘和文件,启动软件选择刻录内容和速度,完成刻录并测试。详细介绍:刻录光盘是将电子文件的数字内容转录到光盘上进行存储的过程。主要分为以下几个步骤:第一,准备刻录光盘。需要准备空白可刻录...
- photoshop序列号过期怎么恢复
-
photoshop安装需要序列号解决方法如下:1、在ghostwin7系统中打开photoshopcs6安装程序,点击安装(我有序列号);2、选择接受;3、断开网(一定要断开,不然得重来!),输入...
-
- 显卡天梯图2019最新版(显卡天梯图2020年最新)
-
显卡天梯图是用户自己上传的,用户自己测试的硬件搭配会影响显卡的性能发挥,他的cpu性能过低限制了显卡的性能发挥所以1650显卡不如960显卡。我这份显卡天梯图中gtx1650显卡的排行是比gtx960显卡高的,正常情况下1650显卡的性能也...
-
2026-01-01 00:05 liuian
- win8没有win10推送(win8.1收不到win10推送)
-
Windows11回退到Windows10后,可能会出现推送停止的情况。这可能是由于以下原因:1.WindowsUpdate配置发生变化。在回退到Windows10后,可能需要重新配置Win...
- windows web server 2008(windowswebserver2008r2未找到提供程序)
-
相同点:都是微软公司的操作系统都是NT系列的操作系统(Windows7为NT6.1,Windows2008为NT6.0,Windows2008R2为NT6.1)区别:适用环境:Windows7可供家庭...
- 微软windows 10激活工具(win10激活工具怎么操作)
-
安装Win10系统时不创建Microsoft账户,从安装主要步骤完成之后进入后续设置阶段开始,步骤如下:1、首先就是要输入产品密钥(如果安装开始时输入过则不显示该界面),或者点击左下角“以后再说”。如...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)
