Joe主题实现打赏设置

野牛哥
2021-05-23 / 2 评论 / 59 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年07月24日,已超过58天没有更新,若内容或图片失效,请留言反馈。

Typecho博客Joe主题实现打赏设置

<li class="item" data-current="joe_custom">打赏设置</li>

3.png

    <div style="text-align: center; margin-left:30px; <?php if(Helper::options()->ZNPaySet !== 'on') echo 'display:none;' ?>">
        <div class="footer_flex">
            <img src="https://cdn.jsdelivr.net/gh/aill66/cdn/shang.png" width="20px" height="20px">
            <div class="flex-footer">
                <img id="ewm" src="<?php $this->options->ZNAlipay() ?>" 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()" checked>支付宝</label>
                    <label style="margin-left:3px;"><input name="pay" type="radio" value="qq" onclick="qq()">QQ</label>
                </div>
                <div style="height:40px; background:rgba(0,0,0,0);"></div>
            </div>
        </div>
        <p style="margin-top:5px; color:#909399; font-size:12px">打赏</p>
    </div>
    <style>
        /*弹出*/
        .footer_flex { width: 42px; height: 42px; background-color: #f56c6c; border-radius: 50%; cursor: pointer; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; color:#909399; font-size:12px}
        .footer_flex:hover { background-color: #409eff; }
        /*top*/
        .footer_flex:hover .flex-footer { display: block; }
        .footer_flex .flex-footer { box-shadow: 0px 0px 5px 0px #409eff; border-radius: 8px; width: 156px; height: 166px; position: absolute; left: -52px; top: -175px; text-align: center; padding-top: 15px; background: #fff; display: none; }
        .flex-footer input{vertical-align:middle; margin-bottom:3px; *margin-bottom:3px;}
    </style>
    <script language="javascript" type="text/javascript">
        function zfb(){
            var obj=document.getElementById("ewm");
            obj.src=`<?php $this->options->ZNAlipay() ?>`;
        };
        function wx(){
            var obj=document.getElementById("ewm");
            obj.src=`<?php $this->options->ZNWeChat() ?>`;
        };
        function qq(){
            var obj=document.getElementById("ewm");
            obj.src=`<?php $this->options->ZNQqPay() ?>`;
        };
    </script> 

2.png


最终结果如下
1.png

4.jpg

本文共 200 个字数,平均阅读时长 ≈ 1分钟
5

打赏

评论 (2)

取消
  1. 头像
    tosam
    Windows 10 · QQ Browser

    学习一下

    回复
  2. 头像
    thug
    Android · QQ Browser

    学习一下表情

    回复