帝国模板之家为广大用户提供专业、一站式建站服务。

帝国cms教程

帝国cms教程栏目,提供精品建站,仿站,二次开发,安装,标签使用等图文教程,帮助建设和管理好你的帝国cms站点。

当前位置:首页 > 教程 > 帝国cms教程 > 正文

帝国cms如何实现二维码打赏功能

帝国模板之家 2020-09-08 帝国cms教程 评论

因为微信和支付宝的收款二维码是永久有效的,我们在日常生活中就发现很多商店都把个人或者商店的收款二维码打印出来让客户扫描付款。根据这个特点,我们只要把收款二维码展示给用户就行了。但是直接放二维码用户又会莫名其妙,所以样式和交互上还需要 整合一下,可以点击 赞助 打赏之后再弹出二维码。今天,帝国模板之家小编教大家在帝国cms模板中实现打赏功能。具体操作如下:

第一步:在需要显示打赏功能的内容页添加如下代码:

<div class="dashangma"><div class="ewm"><ul><li><img src="https://img.91jucai.com/images/weipayimg.jpg">微信收款码</li><li><img src="https://img.91jucai.com/images/alipayimg.jpg">支付宝收款码</li></ul></div><span class="btnds">打赏</span></div>  

第二步:在内容页的js文件添加如下代码:

$(".btnds").click(function(){
   $(".ewm").toggle();
});

第三步:在内容页的css文件中添加如下代码:

.ewm { width: 300px; margin: auto; padding:20px; box-shadow: #cecbcb 1px 1px 10px; display: none; }
.ewm ul { text-align: center; }
.ewm ul li { display: inline-block; }
.ewm ul li img { width: 140px !important; height: 140px !important; }
.dashangma span { width: 60px; height: 60px; background: #F3B840; display: block; line-height: 60px; text-align: center; margin: 20px auto; border-radius: 50%; color: #fff; font-size: 18px;cursor:pointer }

实现效果图如下:

以上就是帝国cms二维码打赏功能的实现方法,更多相关内容请关注帝国模板之家其他文章。

就像朝日会耀眼一样,有一颗明亮的心,一样会照亮人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

帝国手册

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言