ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
liuian 2024-12-30 05:16 61 浏览
看到新浪微博、百度百家等等平台上都带有文章“打赏”功能,觉得很新鲜,于是也想在自己的博客中加入“打赏”功能。
当然,加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞。
而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了)。
加入打赏功能纯粹是“觉得好玩”,就是这么简单,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 }打赏样式
相关推荐
- win10不登录进入安全模式(windows10不登录直接进入桌面)
-
1很多用户进入到桌面前就卡死不动了也没有密码界面。2首先我们可以强制关机三到四次,这是会出现启动设置页面选择“启用安全模式”。3然后右击“开始”点击“运行”。4再在运行窗口输入“msconfig”。5...
-
- windows 10 磁盘管理(wim10磁盘管理)
-
1,在Windows10系统桌面,右键点击此电脑图标,在弹出菜单中选择“管理”菜单项。2,这时就可以打开计算机管理窗口,在这里点击左侧边栏的“磁盘管理”菜单项。3,这时就可以在右侧的窗口中显示出磁盘管理的窗口了。这种说法并不准确。1.Wi...
-
2025-12-07 09:55 liuian
- wifi管理界面(怎么进入自家wifi管理界面)
-
在WiFi管理页面上,通常会包含以下功能和选项:网络名称(SSID)设置、密码设置、安全性设置(如加密类型和访问控制列表)、信道选择、频段选择(2.4GHz或5GHz)、MAC地址过滤、DHCP设置、...
- 入职华为跟入职tplink哪个好
-
华为的好华为的面板,是基于华为鸿蒙系统的有线MESH路由方案。网络面板(子路由),使用POE供电,主路由承担了路由器+POE交换机的功能。通过主路由进行网络管理,本质上是MESH的有线回程,不是AC+...
- windows10防火墙打不开(win10防火墙启用不了)
-
1可能是因为防火墙设置了应用程序的访问权限,而你没有事先进行授权。 2在计算机安全领域,防火墙是一道网络或系统安全的防线,用于防止非法访问或攻击。其会监控入站和出站的网络连接,以过滤不安...
- xp系统截图快捷键是什么(xp系统快速截图)
-
有,微软本身即可截图,快捷键是PrScrn,本文以xp系统和系统自带的画图工具为例进行演示,具体步骤如下所示。1、点击键盘上的PrScrn键进行截图。2、在开始选项卡中找到附件按钮点击进入。3、在附...
- onekey ghost安装器(onekey ghost 一键装机教程)
-
按下边说的步骤去装:一、准备安装1、从网上下载ghostWIN7存放到非系统盘根目录下,如E盘。用WINRAR压缩软件解压,选用“解压文件(A)……”到E根目录下,确定,显示进度,完成后在E根目...
- 电脑c盘爆满怎样清理(电脑c盘满了怎么清理百度经验)
-
可以清理c盘,解决c盘空间不足问题。【解决办法】:1、运用磁盘清理软件清理C盘,大约可为C盘释放50M-800M空间。2、关闭休眠功能,在开始菜单的运行里输入powercfg-hoff指令,关...
- 笔记本长期不用开不了机(长按开机键10秒,释放电脑静电)
-
一般情况下,长期不用开机的笔记本电脑可能会发生电池耗尽、硬件故障或软件故障等问题,导致无法正常开机。建议定期对笔记本电脑进行备份,并定期检查硬件和软件以保证系统的稳定性。另外,应定期更换电池,以减少电...
- win732位旗舰版镜像(win7旗舰版镜像文件官方下载)
-
这种情况,要么电脑硬件太新,要么系统镜像太旧,一般处理方法就是换张系统盘,最好是驱动更新到现在的,没有识别不了的硬件,上不了网就换系统盘重装。
- u盘启动方法(电脑u盘启动方法)
-
u盘启动操作的步骤如下1,制作好的PE系统,开机或重启电脑,快速按F12,按DELE等等启动键,会弹出下面的界面,选USB开头的。2,没有USB的出现,选Entere的回车进入。3,会出现界面,选标注...
- 电脑公司门头效果图(电脑公司背景墙效果图)
-
以下是我的回答,电脑门面出租如何做横版是一个涉及多个方面的复杂问题。以下是一些建议,帮助你完成电脑门面出租的横版设计:确定设计风格:首先,确定你的设计风格。考虑你的品牌形象、目标受众以及电脑门面的整体...
- ie浏览器网页有错误怎么修复
-
ie浏览器网页上有错误解决方法:使用本文中的故障排除方法时要按它们出现的顺序进行。在您完成一个故障排除部分后,请进行测试以确定是否仍发生此脚本错误。如果问题已解决,则不必继续下一部分。如果问题未解决,...
- 一般电脑多少钱一台(电脑一般多少钱一个)
-
旧台式电脑回收价格,要根据电脑的配置和保养程而定。通常配置不高的二手台式电脑,也就一二百元居多。如果是走街串巷收旧电器的,只能给到几十元的价格。旧笔记本电脑:看你卖谁了,要是卖给那些收二手电脑的,基本...
- 一周热门
- 最近发表
- 标签列表
-
- 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)
