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

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

六六丶
2021-04-05 / 205 评论 / 22,863 阅读 / 收录检测中...
广告
温馨提示:
本文最后更新于2023年03月11日,已超过414天没有更新,若内容或图片失效,请留言反馈。

前言

博客搭建已经有一段时间了,文章也写了不少了(虽然有些是扒的表情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 的倒数第二行

63588d37802aa.png

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

切换版下载

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

评论 (205)

图片
私语
取消
  1. 头像
    admin
    北京市海淀区 Windows 10 · Google Chrome
    卢本伟牛逼表情

    回复
    1. 头像
      六六丶 作者
      重庆市 Android · QQ Browser
      @ admin
      你更牛逼表情

      回复
  2. 头像
    遇上你
    日本 Windows 10 · Google Chrome
    画图

    回复
    1. 头像
      六六丶 作者
      重庆市 Android · QQ Browser
      @ 遇上你
      哟,这字写的也不错哦!表情

      回复
  3. 头像
    旧梦
    中国 Windows 10 · Google Chrome
    看看

    回复
  4. 头像
    1
    广东省湛江市 Android · QQ Browser
    看看效果

    回复
  5. 头像
    神话
    宁夏银川市 Android · QQ Browser
    啥也不说了,刚弄好海报现在弄这个,我就齐全了

    回复
    1. 头像
      六六丶 作者
      重庆市 Windows 7 · Google Chrome
      @ 神话
      就差SEO了

      回复
      1. 头像
        神话
        宁夏银川市 Windows 10 · Google Chrome
        @ 六六丶
        看看你

        回复
        1. 头像
          六六丶 作者
          重庆市 Android · Google Chrome
          @ 神话
          看我干啥

          回复
      2. 头像
        神话
        宁夏银川市 Android · QQ Browser
        @ 六六丶
        seo不会

        回复
  6. 头像
    六六丶
    美国加利福尼亚州圣克拉拉县山景市 Linux · Google Chrome
    感谢分享

    回复
  7. 头像
    罗小黑
    安徽省滁州市 Android · QQ Browser
    看看

    回复
    1. 头像
      六六丶 作者
      重庆市 Windows 7 · Google Chrome
      @ 罗小黑
      欢迎欢迎表情

      回复
      1. 头像
        大大白
        海南省三亚市 Windows 7 · Google Chrome
        @ 六六丶
        你好换了代码直接出错啊,可能是你复制代码有些格式不对,能不能通过邮箱重新发一份啊

        回复
        1. 头像
          六六丶 作者
          重庆市 Windows 7 · Google Chrome
          @ 大大白
          可能是你添加的位置不对,你把它放在倒数第二行就行了

          回复
          1. 头像
            大大白
            海南省三亚市 Windows 7 · Google Chrome
            @ 六六丶
            我知道原因了,是我的浏览器把他自动翻译成中文了

            回复
            1. 头像
              六六丶 作者
              重庆市 Windows 7 · Google Chrome
              @ 大大白
              这我是万万想不到的表情

              回复
      2. 头像
        罗小黑
        安徽省合肥市巢湖市 Android · Google Chrome
        @ 六六丶
        已经搞好了表情

        回复
        1. 头像
          六六丶 作者
          重庆市 Android · QQ Browser
          @ 罗小黑
          更新了,快来看呀

          回复
          1. 头像
            罗小黑
            安徽省合肥市巢湖市 Android · Google Chrome
            @ 六六丶
            看看

            回复
          2. 头像
            罗小黑
            安徽省合肥市巢湖市 Android · Google Chrome
            @ 六六丶
            让我看看

            回复
文章目录