ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
liuian 2024-12-30 05:16 90 浏览
看到新浪微博、百度百家等等平台上都带有文章“打赏”功能,觉得很新鲜,于是也想在自己的博客中加入“打赏”功能。
当然,加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞。
而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了)。
加入打赏功能纯粹是“觉得好玩”,就是这么简单,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 }打赏样式
相关推荐
- 电脑能上网但是浏览器上不了网
-
一、感染了病毒这种情况往往表现在打开IE时,在IE界面的左下框里提示:正在打开网页,但老半天没响应。在任务管理器里查看进程,看看CPU的占用率如何,如果是100%,可以肯定,是感染了病毒,这就要查查...
- win10文件夹如何加密码(如何给win10文件夹加密)
-
一、首先,打开Windows10系统,在点安哦上找到要设置密码的文件夹。二、然后,右键选择“文件”,在右键菜单中选择“添加到压缩文件”,点击打开。三、然后,在弹出窗口的左下角点击“添加密码”,点击...
- 用360重装系统失败怎么补救(360重装系统装不了怎么办)
-
您好,虽然360提供系统重装的功能,但不会主动提示用户需要重装系统的。目前360安全卫士有两个功能提供重装或者升级系统:一是“系统重装”功能,在功能大全中可以找到他,支持XP和win7系统的在线重装;...
- 路由器登陆密码破解(路由器登入密码破解)
-
方法一、1、打开浏览器---输入192.168.1.1(一般路由器地址是这个或者查看路由器背面的登录信息)进路由---输入用户名,密码,(默认一般是admin)。 方法二、1、路由器的...
- win8为什么不能永久激活(windows8.1不能激活怎么办)
-
具体操作步骤如下:1、在Win8系统下使?Win+R键调出运?对话框,接着在运?窗?上输?gpedit.msc命令,打开本地组策略编辑器;2、在Win8系统本地组策略编辑器上,展开“Windows设置...
- win7专业版激活密钥永久激活码大全2025
-
cad序列号和密钥是111-111111,可以通用的,但激活码则需要通过CAD2014注册机对申请号的换算才能得出结果,当然结果有很多,用户可以不断的Generate一个。1、直接打开wps程序或者用...
- 笔记本电脑怎么开热点(笔记本电脑怎么开热点共享)
-
笔记本开热点的方法是:1、打开电脑的设置,点击网络和Internet;2、点击最左侧的移动热点;3、打开热点的按钮,再点编辑按钮;4、在弹出的框中,可以对热点的网络名称,密码进行设置,点击保存...
- 显示隐藏文件夹怎么设置win7
-
要在Win7中显示隐藏文件,需依次打开“我的电脑”或“计算机”→点击“工具”→选择“文件夹选项”→在弹出的“文件夹选项”窗口中点击“查看”标签→在“隐藏文件和文件夹”选项中选择“显示隐藏的文件、文件夹...
- 公司电脑怎么共享文件(公司电脑怎样共享一个文件夹)
-
1.开我的电脑2.选择要共享的盘符或者文件。3.选择高级共享。4.勾选共享此文件夹,点击确定即可。5.接下来在去设置网络和共享中心,选择高级共享设置。6.选择,启用网络发现。7.接下来在其他电脑打开网...
- 北斗导航系统的应用(北斗导航系统应用案例)
-
北斗导航系统正成为未来不可或缺的时空信息平台,承载着物联网、智能驾驶、智慧城市等新兴技术对于高精度、高频次时空信息的需求。北斗导航系统与“一带一路”建设推进高度重叠,可以为芯片、终端、板卡、电子地图、...
- win7激活后不能进系统
-
安装安装包正版的才行用WIN7U版ISO全新安装一次,然后用windowsloader等软件激活工具激活就成了,你这个问题分明是激活出问题了!和升WIN10没什么关系。我家里有一台机子洗白后...
- u盘写保护怎么修复(u盘写保护了该怎么办)
-
要解除U盘的写保护,可以尝试以下方法:物理开关:检查U盘是否有物理写保护开关,如果有,请将其关闭。注册表编辑(仅适用于Windows):打开Windows注册表编辑器(regedit),找到HKEY_...
- 装机联盟(装机联盟是什么)
-
装机联盟是否真的能够实现月入三万,这取决于多种因素,包括个人的能力、努力程度、市场环境、竞争状况以及装机联盟的具体运营模式和策略等。首先,装机联盟本身是一个合法的商业模式,它通过集合一群有共同兴趣和技...
- 一周热门
-
-
飞牛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)
