首页 前端知识 基于html jquery实现的网站打赏组件

基于html jquery实现的网站打赏组件

2024-06-10 11:06:41 前端知识 前端哥 251 590 我要收藏

如果你希望在你自己的网站上添加上打赏组件功能,可以参考我实现的打赏组件功能。

当点击打赏按钮的时候,会在网页正中间显示打赏二维码,支持多种打赏方式。

目录

一、效果演示图

二、程序源代码


一、效果演示图

二、程序源代码

<!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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11732.html
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!