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


jQuery点击弹出支付宝微信二维码扫码打赏
jQuery点击弹出支付宝微信二维码扫码打赏以及点击弹出、支付宝微信、二维码扫码打赏等js/jquery网页特效代码下载。

特效描述:点击弹出 支付宝微信 二维码扫码打赏,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>

相关推荐

发表评论

相关文章