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



274 1094 365



特效描述:点击弹出 支付宝微信 二维码扫码打赏,jQuery文章打赏功能,支付宝微信二维码扫码打赏

代码结构

1. 引入JS

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

2. HTML代码

    <div class="content">
    <p><a href="javascript:void(0)" onClick="dashangToggle()" class="dashang" title="打赏,支持一下">打赏</a></p>
    <div class="hide_box"></div>
    <div class="shang_box">
    	<a class="shang_close" href="javascript:void(0)" onClick="dashangToggle()" title="关闭"><img src="img/close.jpg" alt="取消" /></a>
        <img class="shang_logo" src="img/logos.png" alt="金林苑" />
    	<div class="shang_tit">
    		<p>感谢您的支持,我会继续努力的!</p>
    	</div>
    	<div class="shang_payimg">
    		<img src="img/alipayimg.jpg" alt="扫码支持" title="扫一扫" />
    	</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"><img src="img/alipay.jpg" alt="支付宝" /></span>
    		</div>
    		<div class="pay_item" data-id="weipay">
	    		<span class="radiobox"></span>
	    		<span class="pay_logo"><img src="img/wechat.jpg" alt="微信" /></span>
    		</div>
    	</div>
    	<div class="shang_info">
    		<p>打开<span id="shang_pay_txt">支付宝</span>扫一扫,即可进行扫码打赏哦</p>
    		<p>Powered by <a href="http://www.jinliniuan.com" target="_blank" title="金林苑">金林苑</a>,分享从这里开始,精彩与您同在</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到