本文主要是介绍基于html+jquery实现的网站打赏组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
如果你希望在你自己的网站上添加上打赏组件功能，可以参考我实现的打赏组件功能。
当点击打赏按钮的时候，会在网页正中间显示打赏二维码，支持多种打赏方式。
目录
一、效果演示图
二、程序源代码
一、效果演示图
二、程序源代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打赏组件</title><style>.footer_flex .flex-footer {box-shadow: 0px 0px 5px 0px #409eff;border-radius: 8px;width: 300px;height: 166px;position: absolute;left: 100px;top: 200px;text-align: center;padding-top: 15px;background: #fff;display: none;}.flex-footer input {vertical-align: middle;margin-bottom: 3px;*margin-bottom: 3px;}</style><script src="https://www.ewbang.com/dist/js/jquery.min.js"></script>
</head><body><div style="text-align: center; margin-left:30px; "><div class="footer_flex"><div class="flex-footer"><img id="ewm" src="https://ewbangcom.oss-cn-hangzhou.aliyuncs.com/static/weixin/gzh.jpg" width="120px"height="120px"><div style="margin-top:5px;"><label><input name="pay" type="radio" value="wx" checked="checked" onclick="wx()">微信</label><label style="margin-left:3px; display:block-inline"><input name="pay" type="radio" value="zfb"onclick="zfb()">支付宝</label></div><div style="height:40px; background:rgba(0,0,0,0);"></div></div></div></div><button onclick="shang()">打赏</button><script language="javascript" type="text/javascript">function zfb() {var obj = document.getElementById("ewm");obj.src = `https://file.ewbang.com/static/donate/zfb.png`;};function wx() {var obj = document.getElementById("ewm");obj.src = `https://file.ewbang.com/static/donate/weixin.png`;};function shang() {let obj = $(".flex-footer");let isHidden = obj.is(':hidden');if (isHidden) {let screenWidth = $(window).width();screenHeight = $(window).height(); //当前浏览器窗口的 宽高let scrolltop = $(document).scrollTop(); //获取当前窗口距离页面顶部高度let objLeft = (screenWidth - obj.width()) / 2;let objTop = (screenHeight - obj.height()) / 2 + scrolltop;obj.css({left: objLeft + 'px',top: objTop + 'px','display': 'block'});obj.show();} else {obj.hide();}}</script></body></html>这篇关于基于html+jquery实现的网站打赏组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
