打赏功能的实现

打赏功能的实现

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


相关推荐

  • 如何在html添加css样式表,网页中添加CSS样式表的四种方式

    如何在html添加css样式表,网页中添加CSS样式表的四种方式本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍。CSS样式表文件的优势表现在两个方面:***,简化了网页的格式代码,外部的CSS样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。第二,只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格…

    2022年7月14日
    16
  • EasyPlayer实现直播抓拍

    EasyPlayer实现直播抓拍对于一个裸的RTSPURL,存放在播放列表上略显单调与枯燥。大家可以看到EasyPlayer在播放完视频后会保存一帧图片到列表上。那么这个功能是如何做到的呢?如果自己实现解码的话,比如使用ffmpeg解码,这种情况下,将视频帧解码,再编码成jpeg保存下来,应该不是什么难事。相信大多数播放器都是这样处理的。H264格式的视频码流=>解码=>YUV格式的视频帧=>压缩=>jpeg=>保存到

    2022年6月18日
    42
  • listagg小记录[通俗易懂]

    listagg小记录[通俗易懂]listagg的作用是将分组范围内的所有行特定列的记录加以合并成行。函数签名中的measure_expr为分组中每个列的表达式,而delimiter为合并分割符。如果delimiter不设置的话,就表示无分割符。  中间withingroup后面的order_by_clause表示的是进行合并中要遵守的排序顺序。而后面的over子句表明listagg是具有分析函数analyze

    2025年9月6日
    5
  • vscode一键注释_vscode代码缩进快捷键

    vscode一键注释_vscode代码缩进快捷键新建HTML文件时,输入感叹号(!),按tab键,系统没有反应,不会自动补全。新版本用html:5会自动补全

    2022年8月22日
    6
  • Matlab axis用法「建议收藏」

    Matlab axis用法「建议收藏」转载地址:http://blog.sina.com.cn/s/blog_b26a90750101kxdx.htmlaxisoff;%去掉坐标轴axistight;%紧坐标轴axisequal;%等比坐标轴axis([-0.1,8.1,-1.1,1.1]);%坐标轴的显示范围%gca:gca,h=figure(…);set(gca,’XLim’…

    2022年6月11日
    51
  • Vue中插值表达式,v-text和v-html三者区别[通俗易懂]

    Vue中插值表达式,v-text和v-html三者区别[通俗易懂]概述我们在学习vue的过程中,对指令的学习是必不可少的,下面结合自己工作和学习的一点经验介绍下vue中插值表达式,v-text和v-html三者的区别插值表达式我们知道页面的加载时自上而下的,js加载是同步的。当页面刷新比较频繁或者网上较慢的时候,我们使用插值表达式页面会先出现‘{{message}}’,再用真实数据替换‘{{message}}’(模拟这种现象可以将vue.js的引…

    2022年6月13日
    36

发表回复

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

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