ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
liuian 2024-12-30 05:16 66 浏览
看到新浪微博、百度百家等等平台上都带有文章“打赏”功能,觉得很新鲜,于是也想在自己的博客中加入“打赏”功能。
当然,加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞。
而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了)。
加入打赏功能纯粹是“觉得好玩”,就是这么简单,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 }打赏样式
相关推荐
- windows7下载不了原神(电脑无法下载原神)
-
这个应该是网站的软件下载有问题。1在Windows7下无法下载原神游戏。2Windows7是一个较旧的操作系统,可能不符合原神游戏的最低系统要求。原神游戏可能需要更高版本的操作系统才能正常运行...
- 怎么能让电脑运行速度快(如何让电脑运行速度快一点)
-
可以对电脑系统文件进行优化提升电脑运行速度。首先对电脑磁盘进行碎片整理,特别是系统盘,整理一次提升电脑运行速度不少。我们打开我的电脑,右键选择查看属性。让电脑加快运行速度的方法有多种,以下是一些建议:...
- 360云盘登录(360云盘登录网页登录界面)
-
https://yunpan.360.cn/mindex/login?linkurl=https%3A%2F%2Fyunpan.360.cn%2FInternalUser%2Findex这个网址就是3...
- 刻录win7系统盘详细步骤(win7刻录u盘)
-
电脑刻录盘操作如下:1.准备一个空白光盘和一个光驱(自带光驱需要有刻录功能)2.下载一个刻录软件,像nero、狸窝DVD刻录、BurnAware都可以3.将要刻录的内容选中进行刻录,这里截图nero刻...
- ie9官方下载地址(ie9.0浏览器官方下载)
-
如果IE9浏览器无法正常下载,则有可能是IE9浏览器已经停止维护,或当前系统不再支持IE9浏览器。IE9浏览器已经停止维护多年,如果出现下载问题,可能是由于系统或网络环境不再支持IE9浏览器而引起的。...
- c盘分配小了怎么重新调整空间
-
具体方法如下:1.点击开始,win8是右击找到磁盘管理,点击打开。2.可以看到每个盘的情况,如果是C盘小的话,要扩展,那么C盘的下一个区必须是空的,所以要先删除D盘,右击D盘,点击删除卷,在此之前,如...
- 电脑自动关机重启是什么原因
-
1.原因一:电脑硬件散热欠好,致使自动关机;解决方法:查看电脑CPU风扇是不是损坏,如损坏及时重新安装,要保持电脑工作环境通风良好,如果是笔记本最佳加一个散热底座。2.原因二:电脑软件问题;解决方法:...
- 电脑开机后不断黑屏闪烁(电脑开机后不断黑屏闪烁怎么回事)
-
屏线部件原因会占到此类故障的90%以上。1、外接显示器测试,看外接显示器是否也有类似情况,以此判断下此故障是由于主机部分还是屏头部分导致;2、外接显示正常,请重新插拔两侧屏线接口并固定、检查屏线在...
- 水星路由器网址打不开(水星路由器登不上网址)
-
原因和解决办法:1、正确设置电脑IP地址:在对水星无线路由器进行设置之前,需要先把电脑的IP地址设置为自动获得。2、正确安装水星路由器:电话线上网:准备2根较短的网线,一根网线用来连接ADSLMod...
- internet explorer 11官方下载
-
可以在浏览器的internet选项中进行设置。在地址栏中输入想要设置的网址后点击回车。设置之后,点击浏览器右边的设置标志。接着打开的设置列表中选择internet选项。在打开的internet选项中,...
- oppoa5怎么设置返回键(oppoa5手机如何设置返回键菜单键)
-
1设置返回键需要进入oppoA5的设置界面2在“系统与应用”中找到“按钮和手势”选项,点击进入3然后进入“虚拟导航键”选项,找到“返回键”设置,点击开启或关闭即可。延伸:除了虚拟导航键的设置,...
- windows7x86是什么意思(win7x86是多少位的)
-
win7x86的意思是,你使用的操作系统属于WIN732位的操作系统,32位的CPU(准确的说是运行在32位模式下的CPU)只能寻址最大4GB的内存,受制于此,32位的操作系统也只能识别最大4GB的...
- 任务管理器是什么(手机任务管理器)
-
任务管理器就是管理系统任务的工具,可以对正在运行的任务进行管理,比如停止,还可以运行需要的任务答:你好,任务管理器,是在Windows系统中管理应用程序和进程的工具,通常由Windows自带,也有第三...
- 一周热门
- 最近发表
- 标签列表
-
- 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)
