ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
liuian 2024-12-30 05:16 74 浏览
看到新浪微博、百度百家等等平台上都带有文章“打赏”功能,觉得很新鲜,于是也想在自己的博客中加入“打赏”功能。
当然,加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞。
而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了)。
加入打赏功能纯粹是“觉得好玩”,就是这么简单,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 }打赏样式
相关推荐
- 更新显卡驱动后黑屏(更新显卡驱动后黑屏重启)
-
很明显是显卡没有正常工作,驱动程序不正确,系统没有成功启动,可以尝试启动后按f8键,选择带网络连接的安全模式,进入后启动360安全卫士的软件管家,下载驱动大师,启动系统驱动检测,然后根据提示安装驱动就...
- 无限内存(无限内存购买的恐怖躲猫猫三旧版游戏)
-
在计算机系统中,没有真正意义上的无限内存。内存资源是有限的,如果被消耗完,计算机系统也会崩溃或变得非常缓慢。但是,对于某些需要处理大规模数据的任务,可能需要扩大内存以提高计算速度和效率。这可以通过以下...
- qq浏览器手机版下载(qq浏览器手机版下载官网)
-
你是不是没有下载完整的软件,如果你一直用手机试验不成功的话,你可以尝试用电脑进行安装,首先,既然你喜欢在手机上使用qq浏览器,那么我们电脑也用qq浏览器,我平时也喜欢用qq浏览器,看新闻的话,添加书签...
- qq电子邮件的格式怎么写的(qq电子邮件的一般格式)
-
1、常用格式:最常用的就是自己的“qq号+@qq.com”就好了2、英文邮箱账号:“英文或者数字@qq.com”3、foxmail邮箱:开通需要去注册,在格式后方加上“@foxmail.co...
- 显卡怎么区分级别(显卡等级怎么看)
-
1、以性能来分,4650以下为入门级(9600以下),4670以上,4830、4850等为中级(9600以上,GTX260以下),4870、5750、4890、5770等为高级(GTX260+以上)...
- 360手机杀毒完整版下载安装(手机360杀毒 免费下载)
-
对每台电脑的影响不同。常见的有:某些设置无法使用、自动更新出现问题,系统升级时升级不了、电脑运行速度变慢等。实际上win10系统自带的杀毒软件“Windows安全中心”的防御和杀毒能力非常突出,而且免...
- 回收站清空了怎么恢复文件(还原回收站被删除文件)
-
如果你清空了回收站的文件,别担心,还有多种方式可以尝试恢复这些文件。首先,如果你刚刚清空回收站且没有进行任何其他的操作,可以尝试使用撤销还原法来恢复文件。只需同时按住快捷键【Ctrl+Z】即可完成撤销...
- 安卓adb驱动免费版(adb手机驱动)
-
1.下载ADB驱动程序你可以从Android官方网站下载最新版的ADB驱动,或者从第三方网站上下载。在下载后将文件解压到你想要的目录。2.安装ADB驱动程序运行驱动程序的安装程序,...
- 两台电脑连接重装系统(两台电脑怎么给另一台电脑重装系统)
-
如果电脑C盘确实安装了两个系统,建议格式化C盘重装系统。如果不知怎么有两个启动选项可以将其删除右击我的电脑/属性/高级/启动和故障恢复中的设置/在“默认操作系统”的下拉列表中选择你要使用的操作系统,然...
-
- 教务网络管理系统入口(内蒙古民族大学教务网络管理系统入口)
-
钟山学院官网http://www.zscollege.com/钟山学院教务处http://jwc.njzs.edu.cn/钟山学院教务处学生登录入口http://jwgl.zscollege.com/jwweb/(网站左侧)三江学院的...
-
2025-12-28 02:05 liuian
- win10系统下载32位纯净版(下载windows10纯净版)
-
纯净版就是最干净的版本,也叫最绿色的版本。像WIN系统通常会有纯净版、快速安装版、精简版、定制版、Ghost版等。纯净版就是只配套提供了最最基础的软件和功能,一些高级一点的功能或软件需要自己另外安装,...
- 联想主板进入bios的方法(联想台式机怎么进入bios)
-
联想电脑开机一直按F2,就可以进入BIOS,部分机型需要按Fn+F2。BIOS是英文BasicInputOutputSystem的缩略词,直译过来后中文名称就是基本输入输出系统,在IBMPC兼...
- win7升级win10数据还在吗(win7升级成win10上面的数据还有吗)
-
在升级Windows7到Windows10的过程中,可以选择保留个人文件和应用程序,但是不保证所有数据都能完全保留。如果您选择“保留个人文件和应用程序”选项,Windows10安装...
- win7怎么升级到windows10(win7怎么升级到win11系统)
-
Win7不够8G内存怎么升级到win10。朋友也就是说你现在在使用win7系统。内存不够8G那就是4G的呀。Windows10最低配置的内存就是4G。所以说你要把windows7升级为window...
- 一周热门
- 最近发表
- 标签列表
-
- 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)
