注册时间2024-11-22
最后登录2026-6-10
在线时间1669 小时
UID1
买家信用
卖家信用
总共送礼:1 个
总共收礼:0 个
实力·绝代收藏家
|
交易无需等待,成交就是现在,全面资源整合网络大咖云集,让你轻松玩转互联网!
您需要 登录 才可以下载或查看,没有账号?立即注册
×
这个自定义悬浮按钮样式是狐狸忘记从哪位B2站长那里扒来的,说不上原创,但是它是由狐狸库适配用在子比主题上。扒来也很久了,一直没有去适配用到子比主题上,话不多说直接开始!
[h1]功能说明[/h1]
- 适配“会员”按钮,点击后自动跳转开通子比主题会员弹窗。
- 增加“昼夜”切换模式,点击后切换“日间”或“夜间”模式。
- 适配“签到”按钮,点击后自动签到。
- 替换抽奖按钮及图标,可自定义图标&链接。
- 重构“返回顶部”的监听滚动及点击事件Javascript代码。
[h1]代码部署[/h1]
代码一共三个和一个附件,怎么使用呢?很简单HTML放到:WP后台–>>外观–>>小工具–>>自定义HTML将小工具放到:所有页面-侧边栏-顶部位置或者所有页面,自己放一下小工具里面
CSS代码放到:子比主题–>>自定义CSS样式即可!
Javascript代码放到:子比主题–>>自定义javascript代码即可,JS代码用处就是返回顶部的用处!
HTML - <!--
- * @Description : 自定义悬浮按钮
- * @Url : https://www.huliku.com/
- * @Email : ihuliku@qq.com
- * @Date : 2024-01-18 13:14:52
- -->
- <div class="huliku-float">
- <div class="huliku-float-box">
- <div class="huliku-float-item activity">
- <a href="/user/rebate">
-
-
- <div class="popover" style="background: url(/img/float/zbfox-follow-activity-3.png) no-repeat center/cover;"></div>
- </a>
- </div>
- <div class="huliku-float-item huliku-float-vip">
- <a class="vip-buy vip-btn pay-vip" vip-level="2" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
-
- <p class="text">会员</p>
- </a>
- </div>
- <div class="huliku-float-item">
- <a href="javascript:;" class="toggle-theme toggle-radius">
- <i class="fa fa-toggle-theme"> </i>
- </a>
- <p id="themeText" class="text">昼夜</p>
- </div>
- <div class="huliku-float-item">
- <a class="initiate-checkin" href="javascript:;" form-action="user_checkin" ed-text="每日签到">
-
- <p class="text">签到</p>
- </a>
- </div>
- <div class="huliku-float-item">
- <a href="https://huliku.com/choujiang">
-
- <p class="text">抽奖</p>
- </a>
- </div>
- <div class="huliku-float-item huliku-float-service">
-
- <p class="text">客服</p>
- <div class="huliku-float-service-box">
- <div class="tops">
-
- <a href="http://wpa.qq.com/msgrd?v=3&uin=577669882&site=qq&menu=yes" class="topsqq" rel="noreferrer nofollow">点击联系站长</a>
- <p>在线时间<br>12:00 - 22:00</p>
- </div>
- <div class="huliku-float-wx-box">
- <div class="boxs">
- <p>关注微信公众号</p>
-
- </div>
- </div>
- <div class="btms">
- <em>交流QQ群</em>
- <p>78622700</p>
- <em>站长邮箱</em>
- <span>ihuliku@qq.com</span>
- </div>
- </div>
- </div>
- <div class="huliku-float-item huliku-floats hide-on-scroll" id="huliku-floats" style="display: none;">
- <a href="javascript:(scrollTo());">
-
- <p>TOP</p>
- </a>
- </div>
- </div>
- </div>
复制代码
CSS - /*
- * @Description : 自定义悬浮按钮
- * @Url : https://www.huliku.com/
- * @Email : ihuliku@qq.com
- * @Date : 2024-01-18 13:14:52
- */
- .huliku-float {
- position: fixed;
- bottom: 20%;
- right: 1%;
- z-index: 999;
- }
- .huliku-float-box{
- box-shadow: 0 4px 23px rgba(0, 0, 0, 0.08);
- border-radius: 8px;
- background: #fff;
- }
- .huliku-float .huliku-float-item{
- color: rgba(23,23,24,0.8);
- text-align: center;
- cursor: pointer;
- width: 54px;
- padding-bottom: 10px;
- box-sizing: initial;
- align-items: center;
- display: block;
- }
- .huliku-float .huliku-float-item i{
- font-size: 22px!important;
- z-index: 2;
- position: relative;
- color: #171718;
- }
- .huliku-float .huliku-float-item a{
- color: rgba(23,23,24,0.8);
- font-size: 12px;
- text-decoration: none;
- }
- .huliku-float .huliku-float-item a:hover{
- color: var(--primary-color)!important;
- }
- .huliku-float .huliku-float-item img{
- width: 24px;
- }
- .huliku-float .huliku-float-item p.text{
- font-size: 12px;
- margin-top: 5px;
- }
- .huliku-float .huliku-float-item:hover p.text{
- color: var(--primary-color)!important;
- }
- .huliku-float .huliku-float-item.huliku-floats{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: relative;
- }
- .huliku-float .activity{
- background: transparent;
- position: relative;
- height: 128px;
- padding-bottom: 0;
- }
- .huliku-float .activity a{
- display: block;
- }
- .huliku-float .activity .a1{
- width: 100%;
- height: 100%;
- border-radius: 7px 7px 0px 0px;
- }
- .huliku-float .activity .a2{
- position: absolute;
- bottom: 10px;
- left: 10px;
- width: 33px;
- height: 43px;
- animation: red-envelope-shake 0.8s linear infinite;
- transition: all .3s;
- }
- @keyframes red-envelope-shake {
- 0% { transform: rotate(-7deg) }
- 50% { transform: rotate(7deg) }
- 100% {transform: rotate(-7deg) }
- }
- @keyframes turnX{
- 0%{transform:rotateX(0deg);}
- 100%{transform:rotateX(360deg);}
- }
- .huliku-float .activity .popover {
- position: absolute;
- width: 251px;
- height: 128px;
- right: 0;
- left: -196px;
- bottom: 0;
- display: none;
- }
- .huliku-float .activity:hover .popover {
- display: block;
- }
- .huliku-float-box .huliku-float-vip{
- background: linear-gradient(10deg,#fedd92,#fef6e1);
- color: #803300;
- padding-top: 10px;
- margin-bottom: 10px;
- }
- .huliku-float-box .huliku-float-vip a{
- color: #803300!important;
- }
- .huliku-float-box .huliku-float-vip:hover p.text{
- color: #803300!important;
- font-weight: 600;
- }
- .huliku-float-service{
- position: relative;
- }
- .huliku-float-service:hover .huliku-float-service-box {
- display: block;
- transition: all .3s;
- }
- .huliku-float-service-box {
- display: none;
- position: absolute;
- z-index: 999;
- right: 55px;
- bottom: 0px;
- width: 150px;
- padding: 20px;
- text-align: center;
- border-radius: 4px;
- -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05);
- box-shadow: 0 0 3px 1px rgba(0,0,0,.05);
- transition: all .3s;
- background: #fff;
- }
- .huliku-float-service-box .tops{
- text-align: center;
- margin-bottom: 15px;
- padding-bottom: 10px;
- border-bottom: 1px solid #edf1f2;
- }
- .huliku-float-service-box .tops img{
- }
- .huliku-float-service-box .tops a{
- display: block;
- height: 26px;
- line-height: 26px;
- margin: 15px auto 10px auto;
- border: 1px solid #b5b9bc;
- font-size: 12px;
- border-radius: 4px;
- }
- .huliku-float-service-box .tops a:hover{
- background:#fff0;
- color: var(--primary-color)!important;
- border: 1px solid var(--primary-color)!important;
- }
- .huliku-float-service-box .tops p{
- font-size: 13px;
- }
- .huliku-float-service-box .btms{
- text-align: center;
- }
- .huliku-float-service-box .btms em{
- font-size: 14px;
- color: #5f6575;
- font-weight: 500;
- margin-bottom: 10px;
- height: 20px;
- line-height: 20px;
- display: block;
- }
- .huliku-float-service-box .btms p{
- height: 25px;
- font-weight: 500;
- line-height: 25px;
- font-size: 18px;
- color: #4775FF;
- margin-bottom: 10px;
- display: inline-block;
- }
- .huliku-float-service-box .btms span{
- height: 25px;
- line-height: 25px;
- overflow: hidden;
- font-size: 12px;
- color: #FF5151;
- margin-bottom: 10px;
- }
- .huliku-float-wx-box {
- margin-bottom: 15px;
- }
- .huliku-float-wx-box .boxs p{
- font-size: 14px;
- color: #5f6575;
- font-weight: 500;
- margin-bottom: 10px;
- height: 20px;
- line-height: 20px;
- }
- .huliku-float-wx-box .boxs img {
- width: 100%;
- height: 100%;
- display: block;
- margin-top: 10px;
- padding: 5px;
- border: 1px solid var(--border-color);
- margin: 10px auto 0px auto;
- }
- .huliku-float-ma{
- position: relative;
- }
- .huliku-float-ma:hover .huliku-float-ma-box {
- display: block;
- transition: all .3s;
- }
- .huliku-float-ma-box {
- display: none;
- position: absolute;
- z-index: 999;
- right: 54px;
- bottom: 0px;
- width: 170px;
- padding: 10px;
- text-align: center;
- border-radius: 4px;
- -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05);
- box-shadow: 0 0 3px 1px rgba(0,0,0,.05);
- transition: all .3s;
- background: var(--primary-color);
- }
- .huliku-float-ma-box i{
- display: block;
- width: 31px;
- height: 5px;
- margin: 0 auto 10px;
- border-radius: 2px;
- background: #6f96ff;
- }
- .huliku-float-ma-box em{
- display: block;
- margin: 10px auto 0;
- width: 20px;
- height: 20px;
- border-radius: 100%;
- background: #6f96ff;
- }
- .huliku-float-ma-box .tops{
- padding: 10px;
- background: #fff;
- border-radius: 4px;
- text-align: center;
- }
- .huliku-float-ma-box .tops p{
- font-size: 12px;
- color: #5f6575;
- overflow: hidden;
- height: 23px;
- line-height: 23px;
- }
- .huliku-float-ma-box .tops img {
- width: 100%;
- height: 100%;
- display: block;
- margin-top: 10px;
- margin: 10px auto 0px auto;
- }
- @media screen and (max-width: 767px) {
- .huliku-float {
- display: none !important;
- }
- }
复制代码
Javascript - /*
- * @Description : 自定义悬浮按钮
- * @Url : https://www.huliku.com/
- * @Email : ihuliku@qq.com
- * @Date : 2024-01-18 13:14:52
- */
- .huliku-float {
- position: fixed;
- bottom: 20%;
- right: 1%;
- z-index: 999;
- }
- .huliku-float-box{
- box-shadow: 0 4px 23px rgba(0, 0, 0, 0.08);
- border-radius: 8px;
- background: #fff;
- }
- .huliku-float .huliku-float-item{
- color: rgba(23,23,24,0.8);
- text-align: center;
- cursor: pointer;
- width: 54px;
- padding-bottom: 10px;
- box-sizing: initial;
- align-items: center;
- display: block;
- }
- .huliku-float .huliku-float-item i{
- font-size: 22px!important;
- z-index: 2;
- position: relative;
- color: #171718;
- }
- .huliku-float .huliku-float-item a{
- color: rgba(23,23,24,0.8);
- font-size: 12px;
- text-decoration: none;
- }
- .huliku-float .huliku-float-item a:hover{
- color: var(--primary-color)!important;
- }
- .huliku-float .huliku-float-item img{
- width: 24px;
- }
- .huliku-float .huliku-float-item p.text{
- font-size: 12px;
- margin-top: 5px;
- }
- .huliku-float .huliku-float-item:hover p.text{
- color: var(--primary-color)!important;
- }
- .huliku-float .huliku-float-item.huliku-floats{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: relative;
- }
- .huliku-float .activity{
- background: transparent;
- position: relative;
- height: 128px;
- padding-bottom: 0;
- }
- .huliku-float .activity a{
- display: block;
- }
- .huliku-float .activity .a1{
- width: 100%;
- height: 100%;
- border-radius: 7px 7px 0px 0px;
- }
- .huliku-float .activity .a2{
- position: absolute;
- bottom: 10px;
- left: 10px;
- width: 33px;
- height: 43px;
- animation: red-envelope-shake 0.8s linear infinite;
- transition: all .3s;
- }
- @keyframes red-envelope-shake {
- 0% { transform: rotate(-7deg) }
- 50% { transform: rotate(7deg) }
- 100% {transform: rotate(-7deg) }
- }
- @keyframes turnX{
- 0%{transform:rotateX(0deg);}
- 100%{transform:rotateX(360deg);}
- }
- .huliku-float .activity .popover {
- position: absolute;
- width: 251px;
- height: 128px;
- right: 0;
- left: -196px;
- bottom: 0;
- display: none;
- }
- .huliku-float .activity:hover .popover {
- display: block;
- }
- .huliku-float-box .huliku-float-vip{
- background: linear-gradient(10deg,#fedd92,#fef6e1);
- color: #803300;
- padding-top: 10px;
- margin-bottom: 10px;
- }
- .huliku-float-box .huliku-float-vip a{
- color: #803300!important;
- }
- .huliku-float-box .huliku-float-vip:hover p.text{
- color: #803300!important;
- font-weight: 600;
- }
- .huliku-float-service{
- position: relative;
- }
- .huliku-float-service:hover .huliku-float-service-box {
- display: block;
- transition: all .3s;
- }
- .huliku-float-service-box {
- display: none;
- position: absolute;
- z-index: 999;
- right: 55px;
- bottom: 0px;
- width: 150px;
- padding: 20px;
- text-align: center;
- border-radius: 4px;
- -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05);
- box-shadow: 0 0 3px 1px rgba(0,0,0,.05);
- transition: all .3s;
- background: #fff;
- }
- .huliku-float-service-box .tops{
- text-align: center;
- margin-bottom: 15px;
- padding-bottom: 10px;
- border-bottom: 1px solid #edf1f2;
- }
- .huliku-float-service-box .tops img{
- }
- .huliku-float-service-box .tops a{
- display: block;
- height: 26px;
- line-height: 26px;
- margin: 15px auto 10px auto;
- border: 1px solid #b5b9bc;
- font-size: 12px;
- border-radius: 4px;
- }
- .huliku-float-service-box .tops a:hover{
- background:#fff0;
- color: var(--primary-color)!important;
- border: 1px solid var(--primary-color)!important;
- }
- .huliku-float-service-box .tops p{
- font-size: 13px;
- }
- .huliku-float-service-box .btms{
- text-align: center;
- }
- .huliku-float-service-box .btms em{
- font-size: 14px;
- color: #5f6575;
- font-weight: 500;
- margin-bottom: 10px;
- height: 20px;
- line-height: 20px;
- display: block;
- }
- .huliku-float-service-box .btms p{
- height: 25px;
- font-weight: 500;
- line-height: 25px;
- font-size: 18px;
- color: #4775FF;
- margin-bottom: 10px;
- display: inline-block;
- }
- .huliku-float-service-box .btms span{
- height: 25px;
- line-height: 25px;
- overflow: hidden;
- font-size: 12px;
- color: #FF5151;
- margin-bottom: 10px;
- }
- .huliku-float-wx-box {
- margin-bottom: 15px;
- }
- .huliku-float-wx-box .boxs p{
- font-size: 14px;
- color: #5f6575;
- font-weight: 500;
- margin-bottom: 10px;
- height: 20px;
- line-height: 20px;
- }
- .huliku-float-wx-box .boxs img {
- width: 100%;
- height: 100%;
- display: block;
- margin-top: 10px;
- padding: 5px;
- border: 1px solid var(--border-color);
- margin: 10px auto 0px auto;
- }
- .huliku-float-ma{
- position: relative;
- }
- .huliku-float-ma:hover .huliku-float-ma-box {
- display: block;
- transition: all .3s;
- }
- .huliku-float-ma-box {
- display: none;
- position: absolute;
- z-index: 999;
- right: 54px;
- bottom: 0px;
- width: 170px;
- padding: 10px;
- text-align: center;
- border-radius: 4px;
- -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05);
- box-shadow: 0 0 3px 1px rgba(0,0,0,.05);
- transition: all .3s;
- background: var(--primary-color);
- }
- .huliku-float-ma-box i{
- display: block;
- width: 31px;
- height: 5px;
- margin: 0 auto 10px;
- border-radius: 2px;
- background: #6f96ff;
- }
- .huliku-float-ma-box em{
- display: block;
- margin: 10px auto 0;
- width: 20px;
- height: 20px;
- border-radius: 100%;
- background: #6f96ff;
- }
- .huliku-float-ma-box .tops{
- padding: 10px;
- background: #fff;
- border-radius: 4px;
- text-align: center;
- }
- .huliku-float-ma-box .tops p{
- font-size: 12px;
- color: #5f6575;
- overflow: hidden;
- height: 23px;
- line-height: 23px;
- }
- .huliku-float-ma-box .tops img {
- width: 100%;
- height: 100%;
- display: block;
- margin-top: 10px;
- margin: 10px auto 0px auto;
- }
- @media screen and (max-width: 767px) {
- .huliku-float {
- display: none !important;
- }
- }
复制代码
由于此悬浮按钮原本是用在子主题里,分离出来的代码用在子比主题自定义代码中有些出入,导致TOP按钮失效的情况已更新,已经加过此代码的可以重新将上方代码覆盖原代码。
|
|