博客园：加打赏

推荐

GitHub

参考

1

2

tctip打赏插件

tctip是一个js插件，作用是在web网页右侧生成一个打赏浮动窗

页面使用

第一步，引入js

一般引入min版本，即引入tctip-版本号.min.js文件
在当前项目中即dist/tctip-1.0.4.min.js

• 您可以把此js文件下载到您的服务器合适目录进行引用
• 您也可以直接使用我提供的静态链接http(s)://static.tctip.com/tctip-1.0.4.min.js

  <script src="//static.tctip.com/tctip-1.0.4.min.js"></script>

第二步，新建tctip变量，同时传入配置参数，然后运行init函数

  new tctip({
    top: '20%',
    button: {
      id: 9,
      type: 'dashang',
    },
    list: [
      {
        type: 'alipay',
        qrImg: './images/alipay.jpg'
      }, {
        type: 'wechat',
        qrImg: './images/wechat.jpg'
      }, {
        type: 'bitcoin',
        qrContent: '1PhQySHF1ZuoRwoZ8G4CDLEtE6fAnD3GJP'
      }
    ]
  }).init()

刷新页面，即可看到效果！

当前博客保存：

//  打赏
<script src="https://static.tctip.com/tctip-1.0.3.min.js"></script>
<script>
    new tctip({
        top: '50%',
        button: {
            id: 6,
            type: 'dashang',
        },
        list: [
          {
              type: 'alipay',
              qrImg: 'https://files.cnblogs.com/files/pam-sh/alipay.bmp'
          }, {
              type: 'wechat',
              qrImg: 'https://files.cnblogs.com/files/pam-sh/wxpay.bmp'
          }
        ]
    }).init()
</script>

参数说明

（1）top：即该侧边栏插件距离右上方的百分比。

（2）button的id：定义按钮的颜色，目前可选的如下：

（3）button的type：定义按钮上的文字，目前可选的为，dashang=打赏、zanzhu=赞助。

（4）list：定义多个收款码对象，除了上面的支付宝微信，还可以添加财付通、比特币等几种。

（5）list的type：定义收款码种类。目前可选的为，alipay=支付宝、wechat=微信、tenpay=财付通、bitcoin=比特币，等几种。

（6）list的qrImg：定义收款码图片的URL地址。即第二步中准备的内容。