ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
liuian 2024-12-30 05:16 89 浏览
看到新浪微博、百度百家等等平台上都带有文章“打赏”功能,觉得很新鲜,于是也想在自己的博客中加入“打赏”功能。
当然,加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞。
而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了)。
加入打赏功能纯粹是“觉得好玩”,就是这么简单,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 }打赏样式
相关推荐
- 自己怎样给电脑做系统(自己怎样给电脑做系统还原)
-
可以。在家给电脑做系统需要一台电脑、一个可引导的USB或光盘、以及系统镜像文件。首先,将系统镜像文件(如WindowsISO文件)下载到电脑上。然后,使用U盘制作工具(如Rufus)将镜像文件写入...
- 现在win7在哪个网站下载啊(windows7哪个网站下载好)
-
要下载win7系统,首先需要找到可靠的资源网站,如官方网站或知名的软件下载平台。然后在搜索栏中输入“win7系统下载”,选择合适的版本和语言,点击下载按钮开始下载。下载完成后,需要确保系统的完整性和安...
- win7系统纯净版镜像(win7系统纯净版镜像在哪)
-
1、去微软官方网站下载。2、去系统之家下载,我自己的win10就是从哪里下载安装的,你可以试试哈。ghost镜像的使用一、备份主分区--C盘:假设你的操作系统安装在主分区--C盘,当系统重装不久,或...
-
- 126邮箱登录网易邮箱(网易126邮箱登录登录入口 手机)
-
126邮箱是网易的一个免费邮箱登录入口在浏览器输入:mail.126.com浏览器进入126邮箱网站之后,即可自行登录126邮箱账号。126邮箱是网易的一个免费邮箱登录入口在浏览器输入:mail.126.com浏览器进入126邮箱网站之后,...
-
2026-01-20 12:21 liuian
- 移动硬盘分区压缩卷是灰色的
-
1.在开始菜单按钮上单击右键,选择【系统】;2.找到并点击【系统保护】;3.选择【配置】来管理系统保护;4.点击【禁用系统保护】,接着点击【删除】,在弹出的框中点击【继续】;5、完成以上操作后查看C盘...
- 以太网什么意思(以太网什么意思啊)
-
没什么关系。以太网是一种网络类型,特点是硬件不提供传输担保,数据包能不能传到看造化。由软件层面来负责数据的顺序,处理需不需要重传这类事情。由于价格便宜到逆天,所以应用很广。以至于你能见到的绝大...
- 固态硬盘什么牌子好用(固态硬盘那种牌子好)
-
讨论极端耐用的,企业级Intels3710系列SSD。intel自家产mlc闪存颗粒及盘控芯片,各项性能顶尖,盘控优秀,支持每天硬盘满容量数据的10次擦写,连续5年……基本用不坏的,你说耐用不耐用?...
- win7主题重启就改变(win7主题重启就改变了吗)
-
这种情况很正常,安全模式下杀毒的话,杀毒软件有可能是检测到系统保护文件被修改(就是说你的主题文件被病毒或木马修改了),杀毒软件对修改过的系统保护文件,会修复它,使其恢复到系统最初的原样,(也就是将主题...
- ubuntu安装显卡驱动(ubuntu安装显卡驱动后黑屏)
-
Ubuntu是一种流行的Linux操作系统,其显卡驱动的安装方法如下:1. 检查显卡型号:在Ubuntu系统中,打开终端(Terminal),输入lspci-k命令,查看显卡...
- 手机退出返回键怎么设置(ⅴiv0手机返回键怎么设置)
-
手机退回调出来办法如下:首先打开手机,然后点击设置,之后点击系统,然后点击系统导航,接着点击导航栏后面的设置,将导航栏可隐藏的开关向左滑动,然后返回手机桌面,会发现手机桌面下方已经显示返回键。1、手机...
- 系统安装教程win10如何激活(装系统怎么激活 w10)
-
方法一:1.查看方法"WIN+R"打开运行对话框,输入命令slmgr.vbs-xpr,点击确定,这样可以查看到当前系统的激活信息。2.在Windows10专业版测试成功,我们可以在此...
- 塞班系统软件(塞班系统软件安装包)
-
我觉得这个问题不大,只要我们常用的手机软件还支持塞班,我们就应该还能用。诺基亚今天宣布终结塞班,是指不对塞班系统进行更新了,就像winows宣布不对XP系统进行更新补丁是一样的。苹果的软件商店系统...
- 华为笔记本电脑价格大全(华为电脑笔记本价格大全5999)
-
华为MateBookD比较适合玩游戏,是一款出色的大视野影音笔记本,15.6英寸显示屏,分辨率高达1920X1080,画面细腻,色彩真实。显示屏、显卡、音效、处理器,全面满足娱乐、游戏使用。杜比全景声...
- 联想台式电脑u盘重装系统步骤图解
-
步骤一:准备U盘首先需要准备一个容量不小于8GB的U盘,并保证其无需重要数据,因为制作系统盘会将U盘内所有数据清空。步骤二:下载操作系统镜像文件接着需要下载指定版本的操作系统镜像文件,可在官网或其他下...
- 一周热门
-
-
飞牛OS入门安装遇到问题,如何解决?
-
如何在 iPhone 和 Android 上恢复已删除的抖音消息
-
Boost高性能并发无锁队列指南:boost::lockfree::queue
-
大模型手册: 保姆级用CherryStudio知识库
-
用什么工具在Win中查看8G大的log文件?
-
如何在 Windows 10 或 11 上通过命令行安装 Node.js 和 NPM
-
威联通NAS安装阿里云盘WebDAV服务并添加到Infuse
-
Trae IDE 如何与 GitHub 无缝对接?
-
idea插件之maven search(工欲善其事,必先利其器)
-
如何修改图片拍摄日期?快速修改图片拍摄日期的6种方法
-
- 最近发表
- 标签列表
-
- 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)
