打赏功能的实现

打赏功能的实现

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


相关推荐

  • Android ListView等列表设置空布局

    Android ListView等列表设置空布局在Android平台上,listView是特别常用的组件之一,我们在向用户展示列表数据时,通常要考虑:列表有数据和无数据空的状态,因为网络环境各异,难免刷新失败什么的;在此之前我是使用ViewStub来实现,通过判断listview列表数据是否为空来设置ViewStub的隐藏和显示,或者设置lIstview的显示或隐藏;但是,对ViewStub不是特别的了解,把控不好,只是控

    2022年7月22日
    13
  • 分类模型的f1值大概是多少_准确率召回率f1分数

    分类模型的f1值大概是多少_准确率召回率f1分数欢迎您对PaddleHub提出建议,非常感谢您对PaddleHub的贡献!目前PaddleHub已实现您提出的需求,请安装PaddleHub>=1.7.0,PaddlePaddle>=1.8.0快速体验。请您在定义task任务时增加metrics_choices=[‘f1’]选项,即可实现多分类F1Score评估指标,示例如下:task=hub.ImageClassifierT…

    2022年10月14日
    1
  • Window基础(黑客基础)

    Window基础(黑客基础)一、Window重要目录1.ProgramData:C:\ProgramData是个公用的被创建文件夹或文件存放的地方,这些文件夹或文件仅由创建者完整控制。programdata是电脑C盘的一个系统文件夹2.ProgramFiles和ProgramFiles(86):程序软件默认安装目录,它们的区别是前者是安装64位软件,后者是安装32位软件3.Window:系统安装目录4….

    2022年5月2日
    40
  • VeryCD倒下还有千千万万个“VeryCD”站起来「建议收藏」

    VeryCD倒下还有千千万万个“VeryCD”站起来「建议收藏」以下为电驴资源站或者电驴资源搜索站,按推荐度排名。1、http://www.simplecd.org/新兴站点,号称山寨版的Verycd,注册就可发资源帖,下载资源无铜光盘限制!曾经据说由于某种缘故,Simplecd在国内暂时无法访问,网站很久不更新了!不过现在又能访问了,好消息!2.http://www.qvocd.com/一个新兴站点QvoCD电驴,口号是“

    2022年7月15日
    25
  • Mybatis实现Oracle 分页「建议收藏」

    Mybatis实现Oracle 分页「建议收藏」Mybatis+Oracle分页1,使用mybatis的插件PageHelper(1)Mapper.xml<?xmlversion=”1.0″encoding=”UTF-8″?><!DOCTYPEmapperPUBLIC”-//mybatis.org//DTDMapper3.0//EN””http://mybatis.org/dtd/mybati…

    2022年5月28日
    300
  • 【MyBatis学习13】MyBatis中的二级缓存[通俗易懂]

    【MyBatis学习13】MyBatis中的二级缓存[通俗易懂]1.二级缓存的原理  前面介绍了,mybatis中的二级缓存是mapper级别的缓存,值得注意的是,不同的mapper都有一个二级缓存,也就是说,不同的mapper之间的二级缓存是互不影响的。为了更加清楚的描述二级缓存,先来看一个示意图:  从图中可以看出:sqlSession1去查询用户id为1的用户信息,查询到用户信息会将查询数据存储到该UserMapper的二级缓存中。

    2022年9月15日
    3

发表回复

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

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