给子比主题博客加个好看底部导航

15710

前言

本来我不打算更新教程的，因为在捣鼓那个打赏功能，想着写个打赏完之后支付成功的小伙伴可以在表里显示出来，可惜站长之前没有捣鼓过支付，只借鉴了烟雨那个要饭网站，写的不好也有bug，所以想着不分享出来了，可是有小伙伴想要，我就分享一下初始的打赏吧！

更新功能：

  • 加入了本篇文章的点赞、分享数量
  • 加入了一个简单的打赏功能
  • 修改了几个iconfont图标

效果图

给子比主题博客加个好看底部导航-百谷资源网

在functions.php加上下面这段代码

图片是百谷网放在自己本地服务器里的，请自行修改添加自己的图片(//弹窗提醒)

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

引入阿里巴巴矢量库的图标，也可以自行修改

把下面的js跟css引入到你的网站即可

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

在footer.php里加上下面这段代码，自行修改

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

CSS代码

这段css其实是文字的抖动跟适应手机屏幕隐藏底部导航栏(可用可不用，不过@media这段建议保留)

/* 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;}}

JS代码

这段js代码是用来触发滚动条显示百分比的

  <!--滚动进度条百分比-->
$(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},2000)}).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="#icon-dingwei"></use></svg> ' + fullWindowHeightInPercentage + '%';
  if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> 到顶啦';
  if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiasu1"></use></svg> 到底啦';
  if (fullWindowHeightInPercentage == Infinity) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiasu1"></use></svg> 返回顶部！';
}
</script>

结语

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

温馨提示：若内容/图片/下载链接失效，请在下方留言或登录后私信站长。
------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
WP主题美化WordPress教程
# WP教程# WP美化# WP主题美化# 美化主题# 子比主题美化# 美化教程
喜欢就支持一下吧
点赞10 分享
百谷资源网的头像-百谷资源网
量子非凡暴风m3u8资源去广告json解析接口源码2024.10.01-持续更新中-百谷资源网
量子非凡暴风m3u8资源去广告json解析接口源码2024.10.01-持续更新中
量子非凡暴风m3u8资源去广告json解析接口源码2024.10.01-持续更新中
1年前 9517
极光m3u8资源去广告json解析接口源码-禁止下载-百谷资源网
极光m3u8资源去广告json解析接口源码-禁止下载
极光m3u8资源去广告json解析接口源码-禁止下载
1年前 2147
blibli专业版弹幕播放器开源无加密JSON解析版-后台功能一键管理-开源版-百谷资源网
blibli专业版弹幕播放器开源无加密JSON解析版-后台功能一键管理-开源版
blibli专业版弹幕播放器开源无加密JSON解析版-后台功能一键管理-开源...
1年前 1663
快看M3U8资源去广告json解析接口源码2024.08.14-持续更新中-百谷资源网
快看M3U8资源去广告json解析接口源码2024.08.14-持续更新中
快看M3U8资源去广告json解析接口源码2024.08.14-持续更新中
11个月前 1098
各大官方视频对接资源站输出json-百谷资源网
各大官方视频对接资源站输出json
各大官方视频对接资源站输出json
1年前 1023
腾讯视频PHP解析源码-百谷资源网
腾讯视频PHP解析源码
腾讯视频PHP解析源码
1年前 825
相关推荐
评论 共1条

请登录后发表评论

    只看作者
默认头像
超清无广告视频 极速视频
在线视频解析 视频解析
搜索
开启精彩搜索
苹果cms采集时入库解析去广告后的资源-百谷资源网
370人已阅读
苹果cms采集时入库解析去广告后的资源
TOP1
360切片资源m3u8去广告json解析接口源码-百谷资源网
360切片资源m3u8去广告json解析接口源码2024.08.06-持续更新中
4个月前553人已阅读
TOP2
MxPro4.6自适应苹果cms模版-百谷资源网
MxPro4.6自适应苹果cms模版全解密版本
4个月前179人已阅读
TOP3
飞刀切片资源m3u8去广告json解析接口源码-百谷资源网
飞刀切片资源m3u8去广告json解析接口源码2024.06.30-持续更新中
4个月前477人已阅读
TOP4
价值500的官解转资源站轮询并发Json解析源码支持多资源m3u8缓存去广告算法源码-百谷资源网
价值500的官解转资源站轮询并发Json解析源码支持多资源m3u8缓存去广告算法源码
4个月前233人已阅读
TOP5
苹果CMS整合Dplayer播放器插件版独立设置+记忆播放+视频暂停广告-百谷资源网
苹果CMS整合Dplayer播放器插件版独立设置+记忆播放+视频暂停广告
4个月前144人已阅读
TOP6
魔都去插播广告飞刀资源去插播源码随机图片api量子非凡去广告轮询php源码跨域解决.跨域解决豆瓣信息api评论api解析算法美化教程美化主题美化网页播放器网站加速统计模块索尼m3u8去广告站长工具矢量图标直连解析