基于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>
