jQuery点击弹出支付宝微信二维码扫码打赏源码

<title>jquery微信支付宝二维码扫码打赏代码演示 _ 讯沃 blog</title>




<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>


<style type="text/css">
.content{width:80%;margin:200px auto;}
.hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;}
.shang_box{width:540px;height:540px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;}
.shang_box img{border:none;border-width:0;}
.dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;}
.dashang:hover{opacity:0.8;padding:15px;font-size:18px;}
.shang_close{float:right;display:inline-block;}
.shang_logo{display:block;text-align:center;margin:20px auto;}
.shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background: url('img/cy-reward-title-bg.jpg');font-family: 'Microsoft YaHei';margin-top: 7px;margin-right:2px;}
.shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;}
.shang_payimg{width:140px;padding:10px;border:6px solid #EA5F00;margin:0 auto;border-radius:3px;height:140px;}
.shang_payimg img{display:block;text-align:center;width:140px;height:140px; }
.pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;}
.radiobox{width: 16px;height: 16px;background: url('img/radio2.jpg');display: block;float: left;margin-top: 5px;margin-right: 14px;}
.checked .radiobox{background:url('img/radio1.jpg');}
.shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;}
.shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;}
.shang_info{clear:both;}
.shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;}
</style>




<!-- 代码 开始 -->


<div class="content">
<p><a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="dashangToggle()" class="dashang" title="打赏，支持一下">打赏</a></p><div style="border: 0px solid #ddd;text-align: center;">
<ins class="adsbygoogle" style="display: block; text-align: center; height: 157px;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8791508335014957" data-ad-slot="2068690833" data-adsbygoogle-status="done"><ins id="aswift_1_expand" style="border: none; height: 157px; width: 627px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-table;" tabindex="0" title="Advertisement" aria-label="Advertisement"><ins id="aswift_1_anchor" style="border: none; height: 157px; width: 627px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: block;"><iframe id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;border:0;width:627px;height:157px;" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="627" height="157" frameborder="0" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-8791508335014957&output=html&h=157&slotname=2068690833&adk=769402920&adf=1916459765&pi=t.ma~as.2068690833&w=627&fwrn=4&lmt=1635946174&rafmt=11&psa=1&format=627x157&url=https%3A%2F%2Fwww.77nn.net%2F3214.html&flash=32.0.0&wgl=1&dt=1635946173703&bpp=6&bdt=207&idt=919&shv=r20211029&mjsv=m202110280101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D82a71609ab2e3335-22fa17da8cce00c2%3AT%3D1635942673%3ART%3D1635942673%3AS%3DALNI_Mazeb4SErbM5xhwOeOmyYYjjhuvbg&prev_fmts=0x0&nras=1&correlator=4789175330716&frm=20&pv=1&ga_vid=1820814574.1635946174&ga_sid=1635946174&ga_hid=125814620&ga_fc=0&rplot=4&u_tz=480&u_his=1&u_h=900&u_w=1600&u_ah=860&u_aw=1600&u_cd=24&adx=315&ady=1103&biw=1583&bih=729&scr_x=0&scr_y=0&eid=31063183&oid=2&pvsid=650884014721602&pem=634&ref=https%3A%2F%2Fwww.77nn.net%2Fweb%2Fpage%2F6&eae=0&fc=1920&brdim=0%2C0%2C0%2C0%2C1600%2C0%2C0%2C0%2C1600%2C729&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=2&uci=a!2&btvi=1&fsb=1&xpc=H9O4P3VXmS&p=https%3A//www.77nn.net&dtd=1028" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" data-google-container-id="a!2"></iframe></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="hide_box"></div>
<div class="shang_box">
<a class="shang_close" href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="dashangToggle()" title="关闭"></a><div align="center"><a class="shang_close" href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="dashangToggle()" title="关闭"></a><a data-fancybox="jQuery 点击弹出支付宝微信二维码扫码打赏源码" href="img/close.jpg" rel="external nofollow" ><img src="https://www.huizhanii.com/wp-content/themes/zibll/img/thumbnail-lg.svg" data-src="img/close.jpg" alt="jQuery 点击弹出支付宝微信二维码扫码打赏源码-第 2 张-讯沃 blog(讯沃 blog)" title="jQuery 点击弹出支付宝微信二维码扫码打赏源码-第 2 张-讯沃 blog" class="lazyload"></a></div>
<div class="shang_tit">
<p>感谢您的支持，我会继续努力的!</p>
</div>
<div class="shang_payimg">
<div align="center"><a data-fancybox="jQuery 点击弹出支付宝微信二维码扫码打赏源码" href="img/alipayimg.jpg" rel="external nofollow" ><img src="https://www.77nn.net/wp-content/themes/zibll/img/thumbnail-lg.svg" data-src="img/alipayimg.jpg" title="扫一扫" alt="jQuery 点击弹出支付宝微信二维码扫码打赏源码-第 2 张-讯沃 blog(讯沃 blog)" class="lazyload"></a></div>
</div>
<div class="pay_explain">扫码打赏，你说多少就多少</div>
<div class="shang_payselect">
<div class="pay_item checked" data-id="alipay">
<span class="radiobox"></span>
<span class="pay_logo"><div align="center"><a data-fancybox="jQuery 点击弹出支付宝微信二维码扫码打赏源码" href="img/alipay.jpg" rel="external nofollow" ><img src="https://www.77nn.net/wp-content/themes/zibll/img/thumbnail-lg.svg" data-src="img/alipay.jpg" alt="jQuery 点击弹出支付宝微信二维码扫码打赏源码-第 4 张-讯沃 blog(讯沃 blog)" title="jQuery 点击弹出支付宝微信二维码扫码打赏源码-第 4 张-讯沃 blog" class="lazyload"></a></div></span>
</div>
<div class="pay_item" data-id="weipay">
<span class="radiobox"></span>
<span class="pay_logo"><div align="center"><a data-fancybox="jQuery 点击弹出支付宝微信二维码扫码打赏源码" href="img/wechat.jpg" rel="external nofollow" ><img src="https://www.77nn.net/wp-content/themes/zibll/img/thumbnail-lg.svg" data-src="img/wechat.jpg" alt="jQuery 点击弹出支付宝微信二维码扫码打赏源码-第 5 张-讯沃 blog(讯沃 blog)" title="jQuery 点击弹出支付宝微信二维码扫码打赏源码-第 5 张-讯沃 blog" class="lazyload"></a></div></span>
</div>
</div>
<div class="shang_info">
<p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".pay_item").click(function(){
$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
var dataid=$(this).attr('data-id');
$(".shang_payimg img").attr("src","img/"+dataid+"img.jpg");
$("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
});
});
function dashangToggle(){
$(".hide_box").fadeToggle();
$(".shang_box").fadeToggle();
}
</script>


<!-- 代码 结束 -->