子比主题美化 – 会员引导悬浮窗[代码版]

在使用子比主题的网站中，会员引导悬浮窗是一种非常有效的用户引导和转化工具。它能够在用户浏览网页的过程中，以一种突出但又不突兀的方式呈现会员相关的信息和引导操作，从而提高用户对会员服务的关注度，促进会员注册和升级。

效果展示

教程

放自定义顶部或底部html都可以，也可以放文件里，都随意

<!-- Made by Juanyi -->
<!-- 和子比有兼容问题的记得注释掉，如果没引用Jquery记得把注释取消 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js"></script>
<style>
    /* 活动背景图片 */
    .vip-login-tip {
        background-image: url(图片链接)
    }
</style>
<script>
//快捷施法专区，懒人福音⬇️⬇️⬇️
    // 结束时间
    var endtime = "2023/12/28,9:00:00";
    endtime = new Date(endtime);
    // 活动内容
    var viptitle = "限时钜惠";
    var vipsubtitle = "2024年10月8日至12月28日";
    var payvip = "永久会员仅需68￥";
    // 多少天时间显示一次
    var displaytime = 1;
//快捷施法专区，懒人福音⬆️⬆️⬆️
    function addZero(i){return i<10?"0"+i:i+""}function countDown(){var nowtime=new Date();var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);var d=addZero(parseInt(lefttime/(24*60*60)));var h=addZero(parseInt(lefttime/(60*60)%24));var m=addZero(parseInt(lefttime/60%60));var s=addZero(parseInt(lefttime%60));$(".count").html(`活动倒计时<code>${d}</code>天<code>${h}</code>时<code>${m}</code>分<code>${s}</code>秒`);if(lefttime<=0){$(".Ji-col").hide();return}setTimeout(countDown,1000)}function checkCookie(){var viplogin_show=Cookies.get('viplogin_dontshow');if(viplogin_show==""||viplogin_show==null){$(".Ji-row").show();countDown()}else{$(".Ji-row").hide()}}$(document).ready(function(){$(".vip-login-title").html(viptitle);$(".vip-login-subtitle").html(vipsubtitle);$(".vip-login-btn").html(payvip);$(".vip-login-close").click(function(){$(".Ji-row").hide();Cookies.set('viplogin_dontshow','1',{expires:displaytime})});checkCookie();})

</script>
<div class="Ji-row"><style>@media(max-width:800px){.Ji-col{display:none}}.vip-login-tip{position:relative;box-sizing:border-box;padding:18px 10px 22px 20px;width:400px;height:175px;border-radius:var(--main-radius);background-color:var(--main-bg-color);background-position:right 50%;background-repeat:no-repeat;background-size:130px;box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0px 0px 8px rgba(255,112,173,0.35)}.vip-login-countdown-row{display:flex;align-items:center}.vip-login-countdown-row i{color:var(--header-color);font-size:18px}.vip-login-countdown-row.countdown-lable{margin:0 3px 0 4px;font-size:14px;line-height:16px}.vip-login-countdown-row.counddown-wrap{font-size:14px}.vip-login-title{width:218px;margin:10px 0;font-weight:600;font-size:16px;line-height:22px;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;word-break:break-word!important;word-break:break-all;line-break:anywhere;-webkit-line-clamp:1}.vip-login-subtitle{width:218px;color:var(--text2);font-size:14px;line-height:20px;display:-webkit-box;color:#8e8e8e;overflow:hidden;-webkit-box-orient:vertical;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;word-break:break-word!important;word-break:break-all;line-break:anywhere;-webkit-line-clamp:1}.vip-login-btn{margin-top:10px;display:inline-block;height:40px;width:160px;line-height:40px;text-align:center;border-radius:8px;color:#fff;background-color:#00b2ff;transition:background-color.3s,color.3s;font-weight:600;cursor:pointer}.vip-login-close{position:absolute;width:15px;top:5px;right:5px;cursor:pointer}.Ji-row{position:fixed;bottom:30px;right:80px;z-index:10;display:none}.vip-login-countdown-row.counddown-wrap span{display:inline-block;margin:0px 4px;width:20px;font-size:13px;height:18px;color:var(--header-color);border-radius:5px;text-align:center;line-height:18px;font-weight:500px;background:var(--header-color)}</style><div class="Ji-col"><div class="vip-login-tip"><div class="vip-login-countdown-row"><div class="counddown-wrap"><p class="count"></p></div></div><div class="vip-login-title"></div><div class="vip-login-subtitle"></div><div><a href="javascript:void(0);" rel="external nofollow" class="vip-login-btn pay-vip"></a></div><div class="vip-login-close"><svg class="ic-close"viewBox="0 0 1024 1024"><path d="M573.44 512.128l237.888 237.696a43.328 43.328 0 0 1 0 59.712 43.392 43.392 0 0 1-59.712 0L513.728 571.84 265.856 819.712a44.672 44.672 0 0 1-61.568 0 44.672 44.672 0 0 1 0-61.568L452.16 510.272 214.208 272.448a43.328 43.328 0 0 1 0-59.648 43.392 43.392 0 0 1 59.712 0l237.952 237.76 246.272-246.272a44.672 44.672 0 0 1 61.568 0 44.672 44.672 0 0 1 0 61.568L573.44 512.128z"></path></svg></div></div></div></div>

资源