『原创』『代码』为你的博客添加悬浮打赏按钮(按钮切换)
Brains - 灵感乌托邦

『原创』『代码』为你的博客添加悬浮打赏按钮(按钮切换)

六六丶
2021-04-05 / 172 评论 / 15,535 阅读 / 正在检测是否收录...
广告

前言

博客搭建已经有一段时间了,文章也写了不少了(虽然有些是扒的表情XD)

但是前几天有人发消息说觉得我的文章帮到他了,想要打赏,却没有打赏途径

找了很久,除了几个插件就没有我心仪的,但是插件又要下载上传,太麻烦了 XD

所以我就用自学的HTML写了一个悬浮打赏按钮,添加到文章点赞旁边,效果很好,我非常满意,所以现在分享出来

成果展示

版本升级

当我把这个功能做好后,发给要打赏我的人时,Ta却说打赏不了,在微信中总是识别成支付宝的链接 表情

然后我自己试了一下,发现确实会识别错位,不知道是不是支付宝的二维码更要强一些,识别十次九次都是支付宝链接,打赏的人都不想给我打赏了,气死我了 表情

然后我就想到了点击切换二维码,说干就干,首先我用css试了很久,发现光用css已经实现不了我的需求了

然后我就开始琢磨JS来实现,开始用了if语句来切换 imgurl ,确实可以切换了,但是if语句只能对应一个按钮,如果别人不知道按钮可以切换,那就仅显示一个二维码

突然想到,既然用js了,那为什么不直接根据不同的 input 按钮给 img 赋值呢,然后我就写了三段赋值语句(学艺不精啊) 表情

然后就实现了一个按钮切换一个二维码了

再发给要打赏我的人,结果.... 表情

只打赏了0.01元 表情

代码分享

其实这个功能很简单,其实就是CSS的 :hover 来实现的

我使用的是Joe主题,所以我直接添加在点赞旁边,让它看看起来跟整个主题更协调

首先找到Joe主题目录中的点赞文件 public/handle.php 再在点赞按钮后添加以下代码

添加到 public/handle.php 的倒数第二行

image.png

保存后,刷新网站,打赏按钮就出现了,试着把鼠标移上去看看效果吧!

切换版下载

价格: 0.50 元
温馨提示:免登录付款后仅3天内可重复阅读隐藏内容(建议登录后支付),登录付款后可永久阅读隐藏内容! 付费可读
1,262
打赏
gzh

评论 (172)

取消
  1. 头像
    冬眠一整年
    Android · Google Chrome

    事物的发展是前进性与曲折性的统一

    回复 待审 垃圾
  2. 头像
    123
    Windows 10 · Google Chrome

    为了我,你就永远当个废物吧;为了能让我好好努力,就一生,都成为我的负担吧。

    回复 待审 垃圾
  3. 头像
    67676
    Android · Google Chrome

    从前种种,譬如昨日死;从后种种,譬如今日生

    回复 待审 垃圾
  4. 头像
    smile
    Windows 10 · Google Chrome

    故人啊 已做了他人嫁

    回复 待审 垃圾
  5. 头像
    jxjxn
    Android · Google Chrome

    很多人都只会观看,而不会思考。他们如果手边没有雪茄的话,就会用制造噪音来感觉自己的存在。

    回复 待审 垃圾
  6. 头像
    shu
    Android Oreo · QQ Browser

    我喜欢草莓,草莓蛋糕不行,草莓软糖不行,只有草莓才行。就像我喜欢你,长得像你不行,性格像你不行,只有你才行。

    回复 待审 垃圾
  7. 头像
    叶殇珂
    Windows 10 · Google Chrome

    九月是蒲公英漫飞的季节,我喜欢这个季节,只可惜今天是九月的最后一天了

    回复 待审 垃圾
  8. 头像
    1
    Windows 10 · Google Chrome

    在虚构的故事当中追求真实感的人脑袋一定有问题.

    回复 待审 垃圾
  9. 头像
    1
    Android · Google Chrome

    回复看隐藏

    回复 待审 垃圾
  10. 头像
    liusir
    Windows 10 · Google Chrome

    画图

    回复 待审 垃圾
  11. 头像
    23
    Windows 10 · Google Chrome

    二的热风热风

    回复 待审 垃圾
  12. 头像
    23
    Windows 10 · Google Chrome

    画图

    回复 待审 垃圾
  13. 头像
    23
    Windows 10 · Google Chrome

    的威风威风

    回复 待审 垃圾
  14. 头像
    XCATX
    Windows 10 · Google Chrome

    跟大佬学习学习QQ

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ XCATX

      客气了,共同学习!QQ

      回复 待审 垃圾
  15. 头像
    富贵花
    Android · Google Chrome

    6666支持一下

    回复 待审 垃圾
  16. 头像
    结结巴巴
    Android · Google Chrome

    画图

    回复 待审 垃圾
  17. 头像
    king
    Windows 10 · Google Chrome

    感谢分享!

    回复 待审 垃圾
  18. 头像
    晨曦吆
    Android · Google Chrome

    感谢分享!

    回复 待审 垃圾
  19. 头像
    游客1112
    Windows 10 · Google Chrome

    感谢分享2333

    回复 待审 垃圾
  20. 头像
    多少
    Android · QQ Browser

    方法

    回复 待审 垃圾
文章目录