部落格園：加打賞

• 2020 年 5 月 2 日
• 筆記
• 技巧

推薦

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()

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

參數說明

（1）top：即該側邊欄插件距離右上方的百分比。

（2）button的id：定義按鈕的顏色，目前可選的如下：

（3）button的type：定義按鈕上的文字，目前可選的為，dashang=打賞、zanzhu=贊助。

（4）list：定義多個收款碼對象，除了上面的支付寶微信，還可以添加財付通、比特幣等幾種。

（5）list的type：定義收款碼種類。目前可選的為，alipay=支付寶、wechat=微信、tenpay=財付通、bitcoin=比特幣，等幾種。

（6）list的qrImg：定義收款碼圖片的URL地址。即第二步中準備的內容。