子比主题博客加个底部导航教程

81886
当前文章收录状态：
查询中...

效果图

图片[1]-子比主题博客加个底部导航教程-明恒博客

食用方法

第一步

打开自己网站下的 /wp-content/themes/zibll/funactions.php 文件，然后把下面的代码加入到文件内。

  此处内容已隐藏，请评论后刷新页面查看.

第二步

打开自己网站下的 /wp-content/themes/zibll/footer.php 文件，在 </footer> 下面添加下方代码。

  此处内容已隐藏，请评论后刷新页面查看.
图片[2]-子比主题博客加个底部导航教程-明恒博客
图片[3]-子比主题博客加个底部导航教程-明恒博客

第三步

进入后台 Zibll主题设置>自定义代码 页面，在 自定义头部HTML代码 加入下方代码。

<!-- 引入VUE -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css">
<!--明恒博客自用阿里巴巴图标库-->
<script src="//at.alicdn.com/t/font_2232826_a0tvv0wxh9n.js"></script>

第四步

进入后台 Zibll主题设置>自定义代码 页面，在 自定义CSS样式 加入下方代码。

/* 底部导航 start */
.my-face {
    animation: my-face 5s infinite ease-in-out;
    color: #00f1ff;
    display: inline-block;
    margin: 0 5px;
}
@-webkit-keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
@keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
/* end */
@media (max-width: 800px){.footwaveline{display: none;}}
#footgundong{margin-left:20px;overflow: overlay;display: inline-flex;text-align: right;}
.item-foot{color: var(--minor);height: 45px;line-height: 45px;transition: color 0.35s;white-space: nowrap;}
.swal-footer{text-align:center;}
.swal-button {font-size: 20px;}
.count>svg,.count>text{display:none;}
.wz-span {
    border: 1px solid #bbbbbb;
    height: auto;
    color: #bbbbbb;
    font-size: 10px;
    border-radius: 2px;
    padding: 0 2px;
}
/*底部导航*/

第五步

进入后台 Zibll主题设置>自定义代码 页面，在 自定义javascript代码 加入下方代码。

//底部导航 滚动进度条百分比
$(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},4000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)})}})
window.onscroll = function() {
  let scrollNow = window.pageYOffset;
  let pageClientHeight = document.documentElement.clientHeight;
  let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight;
  let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100);
  let percentage = document.getElementById('percentage');
  percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> ' + fullWindowHeightInPercentage + '%';
  if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> 到顶啦';
  if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> 到底啦';
}
let t1 = 0;
let t2 = 0;
let scrollTop = 0;
let timer = null;
document.onscroll = function() {
  clearTimeout(timer);
  timer = setTimeout(isScrollEnd, 500);
  t1 = document.documentElement.scrollTop || document.body.scrollTop;
};
function isScrollEnd() {
  t2 = document.documentElement.scrollTop || document.body.scrollTop;
  let percentage = document.getElementById('percentage');
  if(t2 == t1){
		if(t2==document.body.scrollTop){}else{
			percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#iconA"></use></svg> 回到顶部';
    }
  }
};
function addshoucang() {
    new Vue({
            data:function(){
                this.$notify({
                    title:"⭐ 欢迎收藏本站",
                    message:"ㅤ  使用Ctrl+D即可添加收藏",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:""
                });
                return{visible:false}
            }
        })
};

结语

教程到这就结束了，如果发现有问题的话可以在下面评论留言一下。

© 版权声明
版权声明
1 本站网络名称： 明恒博客
2 本站永久网址： www.zym88.cn
3 本站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
其他语言
# WordPress# 教程# WordPress美化# 子比主题# Zibll
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=270198dipw4ko
点赞6赞赏 分享
你的明明呐丶的头像-明恒博客SVIP会员
2021最新V2Ray搭建图文教程，V2Ray一键搭建脚本！-明恒博客
2021最新V2Ray搭建图文教程，V2Ray一键搭建脚本！
2021最新V2Ray搭建图文教程，V2Ray一键搭建脚本！
3年前 815
【首发】WBOLT热门关键词推荐插件v1.3.1 Pro破解版-明恒博客
【首发】WBOLT热门关键词推荐插件v1.3.1 Pro破解版
【首发】WBOLT热门关键词推荐插件v1.3.1 Pro破解版
4年前 726
PHP判断是否为空的5种方法-明恒博客
PHP判断是否为空的5种方法
PHP判断是否为空的5种方法
4年前 635
网站系统维护通知美化页面-明恒博客
网站系统维护通知美化页面
网站系统维护通知美化页面
4年前 545
豪迪QQ群发器（已移除广告尾巴）-明恒博客
豪迪QQ群发器（已移除广告尾巴）
豪迪QQ群发器（已移除广告尾巴）
4年前 486
linux 服务器综合测速脚本 ZBench-明恒博客
linux 服务器综合测速脚本 ZBench
linux 服务器综合测速脚本 ZBench
4年前 441
相关推荐
2021最新V2Ray搭建图文教程，V2Ray一键搭建脚本！-明恒博客
2021最新V2Ray搭建图文教程，V2Ray一键搭建脚本！
2021最新V2Ray搭建图文教程，V2Ray一键搭建脚本！
3年前 815
【首发】WBOLT热门关键词推荐插件v1.3.1 Pro破解版-明恒博客
【首发】WBOLT热门关键词推荐插件v1.3.1 Pro破解版
【首发】WBOLT热门关键词推荐插件v1.3.1 Pro破解版
4年前 726
linux 服务器综合测速脚本 ZBench-明恒博客
linux 服务器综合测速脚本 ZBench
linux 服务器综合测速脚本 ZBench
4年前 441
一句命令绕过宝塔面板强制绑定账号-明恒博客
一句命令绕过宝塔面板强制绑定账号
一句命令绕过宝塔面板强制绑定账号
4年前 313
【免费分享】WordPress 仪表板UI插件 – UiPress Pro v2.3.8[更新]-明恒博客
【免费分享】WordPress 仪表板UI插件 – UiPress Pro v2.3.8[更新]
【免费分享】WordPress 仪表板UI插件 – UiPress Pro v2.3.8[更新]
2年前 299
mysql基本命令-明恒博客
mysql基本命令
mysql基本命令
3年前 290
评论 共8条

请登录后发表评论

    只看作者
    • 头像123212121212121212120
      要是追不上光，那就变成光吧。
      1年前
    • 头像啊0
      人のエゴで造られた 虚にだけはなりたくはなくて。
      2年前
    • 壁虎的头像-明恒博客壁虎等级-LV1-明恒博客0
      我喝过你喝的西北风，这算不算很穷。
      2年前
用户封面
你的明明呐丶的头像-明恒博客SVIP会员
使用 Java + WebSocket 实现简单实时双人协同 pk 答题-明恒博客
使用 Java + WebSocket 实现简单实时双人协同 pk 答题
使用 Java + WebSocket 实现简单实时双人协同 pk 答题
2个月前 37
[开源] 多端适配社交圈子论坛 star 3k-明恒博客
[开源] 多端适配社交圈子论坛 star 3k
[开源] 多端适配社交圈子论坛 star 3k
2个月前 58
我又发现了几个牛逼的良心工具-明恒博客
我又发现了几个牛逼的良心工具
我又发现了几个牛逼的良心工具
2个月前 56
破解游戏下载站点 – GBT乐赏游戏空间-明恒博客
破解游戏下载站点 – GBT乐赏游戏空间
破解游戏下载站点 – GBT乐赏游戏空间
2个月前 56
为什么阿里建议对 switch 括号内的 String 变量进行判空？-明恒博客
为什么阿里建议对 switch 括号内的 String 变量进行判空？
为什么阿里建议对 switch 括号内的 String 变量进行判空？
2个月前 47
【首发】WPTurbo 性能优化插件 v2.0.3 完美破解版-明恒博客
【首发】WPTurbo 性能优化插件 v2.0.3 完美破解版
【首发】WPTurbo 性能优化插件 v2.0.3 完美破解版
2个月前 53
日历
Calendar Header 1 Calendar Header 2 Calendar Header 3
  • 一
  • 二
  • 三
  • 四
  • 五
  • 六
  • 日
    猜你喜欢
    让浏览器默认使用极速模式-明恒博客

    1让浏览器默认使用极速模式

    你的明明呐丶的头像-明恒博客SVIP会员3年前
    169
    元旦倒计时代码分享-明恒博客

    2元旦倒计时代码分享

    你的明明呐丶的头像-明恒博客SVIP会员4年前
    404
    单独对 websocket 抽象封装，支撑了公司不同业务的消息即时通讯！-明恒博客

    3单独对 websocket 抽象封装，支撑了公司不同业务的消息即时通讯！

    你的明明呐丶的头像-明恒博客SVIP会员2个月前
    29
    Taro框架实现微信登录及获取手机号和用户信息-明恒博客

    4Taro框架实现微信登录及获取手机号和用户信息

    你的明明呐丶的头像-明恒博客SVIP会员1年前
    217
    马上卸载这个恶心的软件！Notepad++-明恒博客

    5马上卸载这个恶心的软件！Notepad++

    你的明明呐丶的头像-明恒博客SVIP会员2个月前
    57
    一个基于SpringBoot实现的图像托管程序-明恒博客

    6一个基于SpringBoot实现的图像托管程序

    你的明明呐丶的头像-明恒博客SVIP会员2个月前
    43