打赏功能的实现

打赏功能的实现

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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • rabbitmq使用案例_RabbitMq

    rabbitmq使用案例_RabbitMqRabbitMQ使用实践参考网站:http://blog.chinaunix.net/topic/surpershi/http://blog.csdn.net/lwkcn/article/details/25086467http://snoopyxdy.blog.163.com/blog/static/60117440201352615631930/1、简介  MQ

    2022年9月27日
    3
  • WebPack_钢铁雄心4toolpack

    WebPack_钢铁雄心4toolpack关于Devtool该选项控制是否以及如何生成源映射。官网上给出的可选值有:其中一些值适合开发,一些用于生产。对于开发,您通常需要快速的SourceMaps,以bundle的大小为代价,但是对于生产,您需要独立的SourceMaps,这是精确的,并且支持最小化。选择一种源映射样式,以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用Sourc…

    2022年10月5日
    3
  • 二叉树的建立及其递归遍历(C语言实现)

    二叉树的建立及其递归遍历(C语言实现)最近在学习数据结构中树的概念,迟迟不得入门,应该是自己的懒惰和没有勤加练习导致的,以后应该多加练习以下是我对二叉树的一些总结内容二叉树的特点有:-每一个节点最多有两棵子树,所以二叉树中不存在度大于2的节点,注意,是最多有两棵,没有也是可以的左子树和右子树是有顺序的,次序不能颠倒,这点可以在哈夫曼编码中体现,顺序不同编码方式不同-即使树中某个节点中只有一个子树的花,也要区分它…

    2022年4月28日
    81
  • java—常量「建议收藏」

    java—常量「建议收藏」常量:在程序执行的过程中其值不可以发生改变。 1.java中常量分类:    A:字面值常量     字符串常量   用双引号括起来的内容      举例:"lixiaochi","liyan"     整数常量      所有整数      举例:12,23     小数常量      所有小数   …

    2022年7月8日
    24
  • 【C语言】getchar 函数的正确使用

    【C语言】getchar 函数的正确使用目录一、getchar函数二、缓冲区1、什么是缓冲区2、为什么要存在缓冲区3、缓冲区的类型4、缓冲区的刷新三、getchar函数的正确使用1、getchar的换行问题2、getchar与scanf的混合使用一、getchar函数从上面的介绍来看,我们要正确使用getchar函数,首先得了解什么是缓冲区。二、缓冲区1、什么是缓冲区缓冲区又称为缓存,它是内存空间的一部分。也就是说,在内存空间中预留了一定的存储空间,这些存储空间用来缓冲输入或输出的数据,这部分预留的空间就叫做缓冲区。

    2022年10月19日
    2
  • 数据挖掘十大算法——简介

    数据挖掘十大算法——简介1.简介ICDM(国际数据挖掘大会)2006年从18种提名的数据挖掘算法中投票选出了十大算法。这18中提名数据挖掘算法分属10大数据挖掘主题,红色部分即为最终选出的十大算法: 分类(Classification) C4.5 CART KNearestNeighbours NaiveBayes 统计学习(StatisticalLearning) SV…

    2022年6月10日
    31

发表回复

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

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