打赏功能的实现

打赏功能的实现

github地址:https://github.com/greedying/tctip

先上传文件

css样式文件:myReward.css

支付二维码

支付方式图片

css引用的图片

打赏或者赞助按钮图片

注意把图片格式改成bmp,博客园只支持bmp格式的图片

修改js源代码并上传

为什么要修改js源代码,因为博客园的文件是不包含文件夹的,文件只有一个地址,输入文件地址即可查看文件

打赏功能的实现

上面这个要把img去掉

 同时如果我们要用到其中的某几个比如说支付宝和微信,我们必须把这个路径改成它们的绝对路径

 

打赏功能的实现

上面这个得把css去掉

 buttonImageId对应的是你上传的文件名称的结尾数,比如上面的是值是3,buttonTip是打赏,那么对应的你需要上传的是打赏文件夹下的tab_3.png(要改成bmp)

当然,我们不需要在js改这个参数配置,因为这些都是可以配置的。只需要把css去掉就同时css改成绝对路径。

 

 

打赏功能的实现

由于我们使用固定的打赏样式,所以,这里直接改成我们选中的那个样式

1
2
3
4
buttonImageUrl: function(){
                
var id = tctip.myConfig.buttonImageId;
                
var tip = tctip.myConfig.buttonTip;
                
return
tctip.imageUrl(
"http://files.cnblogs.com/files/JAYIT/tab_3.bmp"
);//我选的是这个样式,注意 要用文件的绝对地址

1
 

 

上传文件 

最后,把修改好的js上传上去

引用js,添加配置文件

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    
window.tctipConfig = {
        
imagePrefix:
"图片文件的相对路径"
,
//这个可以为空
        
cssPrefix:    
"样式文件的相对路径"
,
//这个也可以为空
        
//staticPrefix: "http://static.tctip.com",
        
buttonImageId:
4
,
        
buttonTip:   
"dashang"
,
        
list:{
            
alipay: { qrimg:
"支付宝二维码绝对路径"
},
            
weixin: { qrimg:
"微信二维码绝对路径"
},
        
}};
</script>

1
<script type=
"text/javascript"
src=
"http://files.cnblogs.com/files/JAYIT/tctip.js"
></script>

1
<script type=
"text/javascript"
src=
"http://files.cnblogs.com/files/JAYIT/qrcode.js"
></script>

不引用它的压缩版就需要引用上面两个js

最后记得把css的样式改下,里面引用了三个图片,有两个我找到了要传到博客园里面,然后在css文件里面引用图片绝对路径,然后把css上传上去然后引用css即可。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112601.html原文链接:https://javaforall.net

(0)
上一篇 2021年11月4日 下午8:00
下一篇 2021年11月4日 下午9:00


相关推荐

  • 泰勒公式(泰勒展开式)通俗+本质详解

    泰勒公式(泰勒展开式)通俗+本质详解比较通俗地讲解一下泰勒公式是什么。泰勒公式,也称泰勒展开式。是用一个函数在某点的信息,描述其附近取值的公式。如果函数足够平滑,在已知函数在某一点的各阶导数值的情况下,泰勒公式可以利用这些导数值来做系数,构建一个多项式近似函数,求得在这一点的邻域中的值所以泰勒公式是做什么用的?简单来讲就是用一个多项式函数去逼近一个给定的函数(即尽量使多项式函数图像拟合给定的函数图像),注意,逼近的…

    2022年4月28日
    165
  • 遍历hashMap的5种方法

    遍历hashMap的5种方法1 使用 Iterator 遍历 HashMapEntry 使用 Iterator 遍历 HashMapKeySe 使用 For each 循环迭代 HashMap4 使用 Lambda 表达式遍历 HashMap5 使用 StreamAPI 遍历 HashMap1 使用 Iterator 遍历 HashMapEntry java tutorials iterations importjava util HashMap import

    2026年3月18日
    2
  • JAVA环境变量配置步骤详细教程

    JAVA环境变量配置步骤详细教程概述Java的环境配置并不是特别难,但是对刚上手的新手来说确实是一个大问题首先下载jdk安装包网址进去选择自己需要的版本下载就行了,这里演示的是jdk-8u131-windows-x64_8.0.1310.11,版本稍老,道理一样安装下载后直接双击运行,这时会让你选择安装路径默认是C盘,这里改成自己想要存放的地方,小编放在了D盘的ROUTE文件夹下的java目录下的jdk1.8.0_131然后点击确定,下一步,开始跑进度条,但是不一会就会弹窗出来jre的安装路径我们点击更改,然后选择一个别的文

    2022年7月8日
    25
  • 一个最近很火的cursor插件:vibe-tools

    一个最近很火的cursor插件:vibe-tools

    2026年3月16日
    3
  • Midjourney学习指南【基础篇】

    Midjourney学习指南【基础篇】

    2026年3月15日
    3
  • Python全栈工程师(字符串/序列)[通俗易懂]

    Python全栈工程师(字符串/序列)[通俗易懂]ParisGabrielPython入门基础字符串:str用来记录文本信息字符串的表示方式:在非注释中凡是用引号括起来的部分都是字符串‘’ 单引号“” 双引号'''&#

    2022年7月6日
    25

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号