手机网页底部广告代码,悬浮底部广告,带关闭开关,复制文字,按钮

发布时间:2020-04-04 16:30:02 作者:Mos 阅读量:14079

此文章是自己看的。

1   <<<<<示例 


<!DOCTYPE HTML>
<html>
<head>
    <title>手机网页底部广告</title>
</head>
<body>
    <div style="width: 100%;height: 14.67vw;position: fixed;bottom: 0;display: none;" id="adDiv">
        <div style="width: 100%;height: 100%;background-color: #222;">
            <table
                style="height: 100%;width: 100%;border: 0;margin: 0;padding: 0;background-color: #222;text-align: center;">
                <tr style="height: 100%;width: 100%;border: 0;margin: 0;padding: 0;">
                    <td style="height: 100%;width: 30%;border: 0;margin: 0;padding: 0;">
                        <img src="https://resource.i847.cn/fenxiang_logo.png" style="width: 90%;height: auto;"
                            id="fenxiang">
                    </td>
                    <td style="height: 100%;width: 25%;border: 0;margin: 0;padding: 0;">
                        <div style="color: white;font-size: 75%;" id="yaoqingma">
                            <div>
                                邀请码,点击复制
                            </div>
                            <div>
                                VET3MU
                            </div>
                        </div>
                    </td>
                    <td style="height: 100%;width: 30%;border: 0;margin: 0;padding: 0;">
                        <a target="_blank"
                            href="https://a.app.qq.com/o/microindex/com.n_add.android?pkgname=com.n_add.android" style="border-radius: 1rem; 
                        float: left;
                        width: 5.125rem;
                        height: 1.75rem;
                        font-family: PingFangSC-Regular;
                        font-size: .75rem;
                        text-align: center;
                        line-height: 1.75rem;
                        color: #0a0a0a;
                        background: #fff;">
                            立即下载
                        </a>
                    </td>
                </tr>
            </table>
            <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
            <script>
                if(isMobile()){
                    document.getElementById("adDiv").style.display = "inline";
                }
                var yaoqingma = document.getElementById('yaoqingma');
                var clipboard = new ClipboardJS(yaoqingma, {
                    text: function () {
                        return 'VET3MU';
                    }
                });
                clipboard.on('success', function (e) {//复制成功执行的回调,可选
                    showToast('邀请码复制成功,请下载粉象生活APP,注册有礼!', 2000);
                });
                clipboard.on('error', function (e) {//复制失败执行的回调,可选
                    console.log(e);
                });
                var fenxiang = document.getElementById('fenxiang');
                fenxiang.addEventListener("click", function () {
                    showToast('<div style="text-align:left;">✔️ 免费下载,邀您加入【粉象生活】<br>✔️ 自动搜索全网大额隐藏优惠券(淘宝、美团、饿了么等)<br>✔️ 先领券再购物,还能返现金<br>………</div>', 2000);
                }, false)

                // 封装的弹窗
                var toastTimer;
                function showToast(msg, duration) {
                    clearTimeout(toastTimer);
                    var ToastBox = document.getElementsByClassName('toastDiv-box')[0];
                    if (ToastBox) document.body.removeChild(ToastBox);//防止重复弹出
                    duration = isNaN(duration) ? 3000 : duration;
                    var m = document.createElement('div');
                    m.className = 'toastDiv-box';
                    m.innerHTML = msg;
                    m.style.cssText = "width: 70%;min-width: 150px;opacity: 0.7;height: auto;color: rgb(255, 255, 255);text-align: center;padding: 10px;border-radius: 5px;position: fixed;top: 40%;left: 15%;z-index: 999999;background: rgb(0, 0, 0);font-size: 14px;overflow: hidden;";
                    document.body.appendChild(m);
                    toastTimer = setTimeout(function () {
                        var d = 0.5;
                        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
                        m.style.opacity = '0';
                        setTimeout(function () { document.body.removeChild(m); }, d * 1000);
                    }, duration);
                }
                function isMobile(){
                    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                        return true;
                    } else {
                        return false;
                    }
                }
            </script>
        </div>
    </div>
</body>

</html>


2   <<<<<示例 



<a href="https://union-click.jd.com/jdc?e=&p=AyIGZRprFDJWWA1FBCVbV0IUWVALHFRHFwQAQB1AWQkFGktBV1cIBR1cHFBTB0EDSF98W0tDBEBWWxgXQh5JXxxFEBdbJV1tR1NfDVNacWAzaxxHcGFyNmYBFUQeC2UbXhEBFQFlG1oUAhcEXBxYFDIiB1YrEHsDIgRUGFscBhUBVR9rFQYbB1weXx0FFQJXHmsSAhs3jLjhwqWk0tynjL2gxojzK2slASI3ZRprFTJNQwhGaxcDEwNc" target="_blank">
        <img src="https://resource.i847.cn/jingdong.jpg" style="width: 100%;height: 100%;">
    </a>


转载请注明出处:文思齐远博客,如果对您有帮助,请帮忙点一下右侧的广告,谢谢您了!
支付宝打赏 微信打赏

我要评论

猜你想搜

实时天气

©2020 i847.cn
部分内容转自网络,如有损害您的权益,致邮联系:jiang2008wen#126.com,一经证实,立即删除!    我要留言
备案号:蜀ICP备18020563号-1